悬停时如何更改另一个元素CSS？
如我所知~，在:hover能够执行此操作后，我需要的是.shopthumb_gallery ul li img:hover，.shopthumb_gallery_name也要与底部对齐放大到相同的宽度。
.shopthumb_wrapper {
width:auto;
margin: 0 auto;
}
.shopthumb_gallery {
margin-top: 30px;
}
.shopthumb_gallery ul {
list-style-type: none;
margin-left: 35px;
}
/* animation */
.shopthumb_gallery ul li, .shopthumb_gallery li img {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.shopthumb_gallery ul li {
position: relative;
float: left;
width: 130px;
height: 130px;
margin: 5px;
padding: 5px;
z-index: 0;
cursor:pointer;
}
/* Make sure z-index is higher on hover */
/* Ensure that hover image overlapped the others */
.shopthumb_gallery ul li:hover {
z-index: 5;
}
/* Image is position nicely under li */
.shopthumb_gallery ul li img {
position: absolute;
left: 0;
top: 0;
border: 1px solid #dddddd;
padding: 5px;
width: 130px;
height: 130px;
background: #f0f0f0;
}
.shopthumb_gallery ul li img:hover {
width: 200px;
height: 200px;
margin-top: -130px;
margin-left: -130px;
top: 65%;
left: 65%;
text-overflow:none;
}
.shopthumb_gallery_name{
position:absolute;
background:#444;
opacity:0.8;
color:#fff;
font-family: 'Raleway';
padding:5px;
font-size:12px;
bottom:3%;
width: 120px;
margin-left:1px;
overflow: hidden;
text-overflow: ellipsis;
}<div class="shopthumb_wrapper">
<div class="shopthumb_gallery">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png">
<label class="shopthumb_gallery_name">NameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameName</label>
</li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/2.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/3.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/1.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/4.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/5.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/7.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/8.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/6.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
</ul>
</div>给定您提供的HTML，在这种情况下，两个组合器（+/ ~）都可以使用。
值得指出的是，它~是一个通用的同级组合器，它选择所有后续的同级元素。而+是邻近的兄弟组合子，其将仅选择后邻接兄弟。
使用以下任一方法：
.shopthumb_gallery ul li img:hover + .shopthumb_gallery_name {
}
.shopthumb_gallery ul li img:hover ~ .shopthumb_gallery_name {
}
我会选择第二个选择器，因为它可能更适合将来使用（假设标记已更改，并且标签不再是相邻的兄弟）。
.shopthumb_wrapper {
width: auto;
margin: 0 auto;
}
.shopthumb_gallery {
margin-top: 30px;
}
.shopthumb_gallery ul {
list-style-type: none;
margin-left: 35px;
}
.shopthumb_gallery ul li,
.shopthumb_gallery li img,
.shopthumb_gallery li label {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.shopthumb_gallery ul li {
position: relative;
float: left;
width: 130px;
height: 130px;
margin: 5px;
padding: 5px;
z-index: 0;
cursor: pointer;
}
/* Make sure z-index is higher on hover */
/* Ensure that hover image overlapped the others */
.shopthumb_gallery ul li:hover {
z-index: 5;
}
/* Image is position nicely under li */
.shopthumb_gallery ul li img {
position: absolute;
left: 0;
top: 0;
border: 1px solid #dddddd;
padding: 5px;
width: 130px;
height: 130px;
background: #f0f0f0;
}
.shopthumb_gallery ul li img:hover {
width: 200px;
height: 200px;
margin-top: -130px;
margin-left: -130px;
top: 65%;
left: 65%;
text-overflow: none;
}
.shopthumb_gallery_name {
position: absolute;
background: #444;
opacity: 0.8;
color: #fff;
font-family: 'Raleway';
padding: 5px;
font-size: 12px;
bottom: 3%;
width: 120px;
margin-left: 1px;
overflow: hidden;
text-overflow: ellipsis;
}
.shopthumb_gallery ul li img:hover + .shopthumb_gallery_name {
bottom: -25px;
color: red;
}<div class="shopthumb_wrapper">
<div class="shopthumb_gallery">
<ul>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png">
<label class="shopthumb_gallery_name">NameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameName</label>
</li>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/2.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/3.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/1.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/4.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/5.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/7.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/8.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/6.png">
<label class="shopthumb_gallery_name">Name</label>
</li>
</ul>
</div>附带说明一下，我label通过添加其他选择器将过渡添加到了元素：
.shopthumb_gallery ul li,
.shopthumb_gallery li img,
.shopthumb_gallery li label {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
我还习惯于bottom: -25px将label元素与底部对齐。它是一个硬编码的值，但是您可以通过更改一些内容来避免它。
.shopthumb_gallery ul li img:hover + .shopthumb_gallery_name {
bottom: -25px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句