Question

我正在制作一个小型照片库，当我将鼠标悬停在图像或文本链接上时，我希望它对图像产生影响。你可以在这里看到一个例子：

现在，如果将鼠标悬停在整个父div中的任何一个上，它会触发我想要的图像和图像范围的悬停效果。但问题是，如果将鼠标悬停在h4 a右侧的空白区域，它仍会触发悬停，但用户无法实际点击链接。

现在在实际工作中，我有另一个元素浮动到h4 a的右边，所以它不是一个解决方案，只是让h4成为一个块。

当h4 a悬停时，如何使用css来定位.gallery-image？

HTML

<div class="galleries">

<div class="gallery">
    <div class="gallery-image">
        <a href="" title="view photo gallery"><span class=""></span></a>
        <a href="" title="view photo gallery"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTEH-vPVcz7F8Yb18iLtDEjnZsbWfYG4lCFdyhKMRYax1krBnRD" alt="" /></a>
    </div>
    <h4><a href="" title="view photo gallery">gallery name</a></h4>
</div><!-- end div.gallery -->

CSS

#content-full {
width:960px;
padding:30px 0 0;
}
.clearboth {
clear:both;
height:0;
}
.gallery {
position:relative;
float:left;
width:300px;
margin:0 10px 35px;
}
.gallery-image span {
background:url("http://inventionhome.com/wp-content/uploads/2014/07/zoom.png") no-repeat center center;
width:90px;
height:90px;
display:none;
z-index:999;
margin:auto;
position:absolute;
top:-50px; left:0; bottom:0; right:0;
}
.gallery-image {
background-color:#4576a4;
}
.gallery-image:hover span, .gallery:hover .gallery-image span {
display:block;
}
.gallery-image img {
display:block;
width:100%;
height:230px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.gallery-image:hover img, .gallery:hover .gallery-image img {
opacity:0.2;
}
.galleries h4 {
margin-top:5px;
line-height:27px;
}
.galleries h4 a {
color:#142533;
}
.galleries h4 a:hover {
text-decoration:none;
}

Answer 1

使用CSS时遇到的问题是，没有CSS选择器来选择上一个或父元素。如果您的图像尺寸（高度）一致，您可以解决此规定，您可以将<h4>放在<div class="gallery-image">之前，并使用position: absolute;将其放在图像下方 - 允许您使用CSS ~选择器让悬停事件影响图像，因为它位于DOM中的元素之后。另外，我使用display: inline-block;缓解了您的空白区选择器问题：

<div class="gallery">
    <h4>...</h4>
    <div class="gallery-image">...</div>
</div>

.gallery {
  position:relative;
}  
.gallery-image:hover span {
  display:block;
}
.gallery-image:hover img {
  opacity:0.2;
}
.galleries h4 {
  margin-top:5px;
  line-height:27px;
  display: inline-block;
  position: absolute;
  top: 230px;
} 
.galleries h4:hover~.gallery-image img {
  opacity:0.2;
}
.galleries h4:hover~.gallery-image span {
  display: block;
}

- 我只在

上面编辑了CSS

<强> JSFIDDLE

Answer 2

我正在提出另一个答案，在将样式应用于标记层次结构中同一级别的元素时，符号“ + ”也有效：

CSS修改：

.galleries h4:hover + .gallery-image img {
  opacity:0.2;
}
.galleries h4:hover + .gallery-image span {
  display: block;
}

仅当我们定位的元素在初始之后立即定位时，它才能。在我们的情况下它可以工作，就在h4：hover之后，我们找到了.gallery-image。

用于悬停的CSS来更改同级元素

2 个答案: