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

Question

我正在制作一个小照片库，我希望当您悬停图像或文本链接时对图像产生影响。您可以在此处查看示例：

http://codepen.io/anon/pen/qarvc

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

现在在实际工作中，我还有一个元素浮动到了h4a的右边，所以只把h4a做成一个块不是解决办法。

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。