如何将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

IF 您希望在父元素悬停时保留子元素的样式，您需要取消父样式，如下所示

.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
}