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

Question

我正在尝试使用 .box_1 img:hover ~ .m_12 将鼠标悬停在 .box_1 img 上时设置 span .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">0</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 的 child/descendant，它是 link 的 sibling a 是 .box_1

的子代

Answer 2

使用此代码：

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

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

How to style child's child element when hover over parent

html

css

hover