CSS悬停在点上以显示图像 - 不悬停在图像上答案

【问题标题】：CSS hover on dot to reveal image - not hovering on imageCSS悬停在点上以显示图像 - 不悬停在图像上
【发布时间】：2015-06-08 03:33:27
【问题描述】：

我正在创建一个销售页面，其中将有几个产品经过 photoshop 处理到背景图像上。我希望客户能够将鼠标悬停在产品上的一个点上以显示其信息并包含类似于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：＃容器 { 位置：相对；宽度：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;
}

【问题讨论】：

请写下你的javascript代码。

标签： html css

【解决方案1】：

为您解决了这个问题：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;
}

一个新的小提琴来证明这一点：http://jsfiddle.net/hvb77m8L/6/

【讨论】：

非常感谢wavemode，太完美了！
另一个问题：现在当我想将鼠标悬停在隐藏图像上时，它消失了。我还能做些什么让它留下来吗？谢谢。