html - 如何悬停一个 div 并悬停一些元素？

Question

我希望当鼠标停留在 上时div hello，带有类nice_day和图像的段落不会受到影响。

应该如何使用css3？

<div class="hello">
  <div class="stack"><img src="1.png"/></div>
  <div class="overflow"><p class="ilove"><img src="2.png"/>Im a text</p>
       <p class ="programming"Im other text</p>
         <div class="Have">
             <img src="3.png"/>
            <p class="nice_day"></p>
         </div>
  </div>
</div>

谢谢

Answer 1

选项 #1 - 选择性添加

这种方法着眼于:hover祖先的状态，只在需要的地方添加样式。

1. 简单：http: //jsfiddle.net/gF7Ju/2/
2. 多个元素：http: //jsfiddle.net/gF7Ju/3/

CSS

/* just for formatting so we can see the boxes */

.hello {
    border: 1px solid red;    
}

.hello > div {
    padding: 6px;
    border: 1px solid silver;
}

/* 

Selector(s) here to determine which element(s) should be impacted by the
parent's hover, and which should not.

*/

.hello:hover div:first-child {
    background-color: yellow;    
}

HTML

<div class="hello">
    <div>Hover effect</div>
    <div>No hover effect</div>
</div>

选项 #2 - 有选择地取消/忽略

根据悬停时应修改的属性，您可以将悬停样式应用于祖先，然后重新设置子项的样式（例如，设置background-color为白色，即使父项的悬停背景是黄色的）。

在可能的情况下，我更喜欢第一种方法。

Answer 2

如果要在父元素悬停时保留子元素的样式，则需要取消父样式，如下所示

.hello{text-decoration: underline;}
.hello:hover img, .hello:hover .nice_day{text-decoration: none}

请注意，我们正在text-decoration: none为子元素设置img；并以防它们在悬停.nice_day时加下划线。.hello

Answer 3

您可以再次将默认 CSS 设置为p.nice_day：

div.hello:hover p.nice_day{
   //your default css of .nice_day
}