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

我正在创建一个销售页面，其中会有几个产品photoshopped放到背景图像上。我希望客户能够将鼠标悬停在产品上的某个点上，以显示其信息并包含类似于http://www.wineenthusiast.com/custom-cellars/的链接，但我希望在纯CSS中执行此操作。我只希望信息和链接出现在用户悬停在点上，然后在包含div上。我一直遇到的问题是，因为两个元素都包含在同一个div中，所以会显示相应的图像。当此页面上有15种产品时，这会太麻烦。仍然是noob编码器，所以任何帮助将不胜感激，谢谢！CSS悬停在点上以显示图像 - 不在图像上悬停

这里的小提琴：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的{ 位置：相对; width：960px; margin-left：auto; margin-right：auto; }

.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; 
}

来源

2015-04-03 jakvisualdesign

请编写您的JavaScript代码。 – Kumar 2015-04-03 09:32:01

修正为你：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/

来源

2015-04-03 02:47:42 wavemode

非常感谢你的wavemode，这非常完美！ – jakvisualdesign 2015-04-03 17:38:40

另一个问题：现在，当我想将鼠标悬停在隐藏的图像上时，它会消失。还有什么我可以做，以便它保持？谢谢。 – jakvisualdesign 2015-04-03 17:55:22

@jakvisualdesign当然，我编辑来解决这个问题。 – wavemode 2015-04-03 18:21:54

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

回答

相关问题