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

Question

I'm trying to style span .m_12 on hover over .box_1 img using .box_1 img:hover ~ .m_12 .But this seems not working.

<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

This

.box_1 img:hover ~ .m_12

will not work because it assumes that .m_12 is a sibling of the img and it isn't.

Hovering can only affect the element being hovered, it's descendents or siblings.

So, you would need.

.box_1 a:hover + .box_2 .m_12

or

.box_1 a:hover ~ .box_2 .m_12

In other words, the .m_12 element is a child/descendant of .box2 which is a sibling of the link a which is a child of .box_1

Answer 2

use this code:

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