Question

我正在创建一个商品推销页面，其中会有几个产品贴在背景图片上。我希望客户能够悬停在产品上的一个点上以显示它的信息，并包含类似于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; 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;
}

Answer 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/

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

1 个答案: