如何在将鼠标悬停在父级上时设置子级元素的样式

Question

我正试图span .m_12在悬停时.box_1 img使用.box_1 img:hover ~ .m_12.但这似乎不起作用.

<div class="col-md-4 box_1"> 
  <a href="#">
    <img src="images/pic1.jpg" class="img-responsive" alt=""/>
  </a>
  <div class="box_2">
    <div class="special-wrap">
       <div class="forclosure2">
         <span class="m_12">$140</span>
       </div>
    </div>
  </div>
</div>

Answer 1

这个

.box_1 img:hover ~ .m_12

将无法工作,因为它假定它.m_12是兄弟姐妹,img而不是.

悬停只会影响被徘徊的元素,它是后代或兄弟姐妹.

所以,你需要.

.box_1 a:hover + .box_2 .m_12

要么

.box_1 a:hover ~ .box_2 .m_12

换句话说,该.m_12元素是其子/后代,是该子项的链接.box2的兄弟a.box_1