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

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的兄弟，它是{的子级{ {1}}

Answer 2

使用此代码：

.box_1 img:hover .m_12 {
   /* Write your style */
}