我有一个网站，其中包含三个带文本的链接。
我试图做到这一点，以便当我将鼠标悬停在文本链接上时会显示特定的图像。
我能够将鼠标悬停在文本上并更改文本的颜色。
但我不知道如何使每个链接悬停在不同的图像上。
<!DOCTYPE html>
<head>
<style>
/* mouse over link */
a:hover {
color: white;
}
</style>
</head>
<body
<div class="flex-container">
<div class="flex-item"><img src="cityscape.png">
<a href="ArchitectureWork.html">arch</a></div>
<div class="flex-item"><a href="FineArt.html">fine art</a></div>
<div class="flex-item"><a href="Doodles.html">doodles</a></div>
</div>
</body>
.flex-container {
/*display: -webkit-flex;*/
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
color: aqua;
align-content: center;
padding-left: 90px;
padding-right: 90px;
}
.flex-item{
/*-webkit-flex: 1;*/
/* I don't get order */
order: 1;
flex: 1;
flex-basis: 20%;
max-width: 1000px;
min-width: 100px;
align-self: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px;
}
最佳答案
.flex-item > img { display: none; }
.flex-item:hover > img { display: inline; }
.flex-item:hover > a { display: none; }
.flex-container { display: flex; }<div class="flex-container">
<div class="flex-item">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<a href="ArchitectureWork.html">arch</a>
</div>
</div>关于html - 将文本链接转换为悬停时的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37229841/