我正在创建一个商品销售页面，其中将有几个产品被 Photoshop 处理到背景图片上。我希望客户能够将鼠标悬停在产品上的一个点上以显示其信息并包含类似于 http://www.wineenthusiast.com/custom-cellars/ 的链接但我想用纯 CSS 来做。我只希望当用户将鼠标悬停在点上然后在包含的 div 上时显示信息和链接。我一直遇到的问题是，由于两个元素都包含在同一个 div 中，因此会显示相应的图像。当这个页面上有 15 个产品时，这会太乱了。仍然是菜鸟编码员，因此将不胜感激任何帮助，谢谢!
这是 fiddle :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: ＃容器 { 职位:相对； 宽度: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/
诀窍是使用 adjacent sibling selector + 允许悬停在点上以影响旁边的图像。所以，这:
.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;
}
一个新的 fiddle 来证明这一点:http://jsfiddle.net/hvb77m8L/6/
关于html - CSS 悬停在点上以显示图像 - 而不是悬停在图像上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29425490/