我正在创建一个商品页面，在该页面上将有数种产品被照相购物到背景图像上。我希望客户能够将鼠标悬停在产品上的点上以显示其信息，并包含类似于http://www.wineenthusiast.com/custom-cellars/的链接，但我想使用纯CSS做到这一点。我只希望当用户将鼠标悬停在点上然后在包含的div上时显示信息和链接。我一直遇到的问题是，由于两个元素都包含在同一个div中，因此会显示相应的图像。如果此页面上有15个产品，这将太混乱了。还是一个菜鸟编码器，所以任何帮助将不胜感激，谢谢！
这是小提琴：http : //jsfiddle.net/jakvisualdesign/hvb77m8L/2/
和代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" href="style.css">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div class="base">
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg" />
</div>
<div class="pop-container-a">
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg">
<div class="dot"></div>
</div>
</div>
</body>
</html>
和CSS：#container {position：relative; 宽度：960px；左边距：自动；右边距：自动；}
.base {
width: 100%;
height: 100%;
position: absolute;
}
#container.pop-container-a img {
position: absolute;
}
.dot {
width: 10px;
height: 10px;
position: absolute;
background-color: red;
z-index: 10;
border-radius: 50%;
}
.pop-container-a img {
position:absolute;
opacity: 0;
width: 150px;
transition: opacity .5s ease;
}
.pop-container-a:hover .dot, .pop-container-a:hover img {
opacity: 1;
}
.pop-container-a {
position: absolute;
top: 100px;
left: 50px;
display: inline-block;
}
已为您解决此问题：http : //jsfiddle.net/hvb77m8L/3/
诀窍是使用相邻的兄弟选择器 +来允许将鼠标悬停在点上，以影响其旁边的图像。所以这：
.pop-container-a:hover .dot, .pop-container-a:hover img {
opacity: 1;
}
变成这个：
.dot:hover + img {
opacity: 1;
}
编辑：并且由于选择了紧随目标元素之后的元素，因此还请注意我对此进行了更改：
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg">
<div class="dot"></div>
对此：
<div class="dot"></div>
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg">
编辑2：要使图像悬停在上方时，可以通过将其宽度设置为0来默认使它们处于非活动状态：
.pop-container-a img {
opacity: 0;
width: 0; // in addition to being invisible, the image will not respond to hovering
position: absolute;
transition: opacity .5s ease;
}
然后，当将鼠标悬停在点上时，将图像恢复为正常的宽度和正常的不透明度：
.dot:hover + img {
width: 150px;
opacity: 1;
}
当图像处于此状态时，它现在可以停留在此处并具有悬停效果：
.dot + img:hover {
width: 150px;
opacity: 1;
}
一个新的小提琴来演示这一点：http : //jsfiddle.net/hvb77m8L/6/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句