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

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">$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 的子元素/后代，而 .box2 是链接 的兄弟 a 是 .box_1

的子项