Question

当您将鼠标悬停在div上时，background-color适用于整个div。我想要排除h2，我希望将h2文字保留为黑色而不显示背景颜色。

<style>
  .Blog-header-content:hover {
    background: rgb(237, 177, 196) none repeat scroll 0 0 important;
    opacity: 0.4;
  }

  h2 {
    color: #000;
  }
</style>


<div class="Blog-header-content">
  hihihihhihhihihihhiihhihih
  <h2 class="Blog-title">helloooooooooooooo</h2>
</div>

Answer 1

实际上，所有<h></h>标记都在<div></div>标记内，当您淡化其不透明度时，文本也会淡化。

这是一个做同样事情而不淡化文本的技巧..只需从div中删除不透明度标签并为颜色添加不透明度。

显示<h2>标记而不淡出

只需将rgb(237, 177, 196)更改为rgb(237, 177, 196,.4)，然后移除opacity(0.4)希望此功能

.Blog-header-content:hover{  background: rgba(237, 177, 196,.4) none repeat scroll 0 0 !important ;}
h2{color:#000;}

<div class="Blog-header-content">
hihihihhihhihihihhiihhihih
<h2 class="Blog-title">helloooooooooooooo</h2>
</div>

如果您想显示没有背景颜色的h2代码，请将其放在div代码

之外

.Blog-header-content:hover{  background: rgba(237, 177, 196,.4) none repeat scroll 0 0 !important ;}
h2{color:#000;}

<div class="Blog-header-content">
hihihihhihhihihihhiihhihih

</div>
<h2 class="Blog-title">helloooooooooooooo</h2>

Answer 2

你可以用这个来悬停在div

上从h2中删除背景

.Blog-header-content:hover{  background: rgb(237, 177, 196) none repeat scroll 0 0 !important ;opacity:0.4;}
.Blog-header-content:hover h2{  background: #fff!important ;}
h2{color:#000;}

<div class="Blog-header-content">
hihihihhihhihihihhiihhihih
<h2 class="Blog-title">helloooooooooooooo</h2>
</div>

但是当它出现在不透明度上时，如果你减少主div的不透明度，那么子元素也会使用父元素的不透明度。

所以，如果可能的话，你可以通过像这样的一些html改变来做到这一点

.Blog-header-content:hover{  background: rgb(237, 177, 196) none repeat scroll 0 0 !important ;}
.Blog-header-content:hover span{ opacity:0.4;}
.Blog-header-content:hover h2{  background: #fff!important ;}
h2{color:#000;}

<div class="Blog-header-content">
<span>hihihihhihhihihihhiihhihih</span>
<h2 class="Blog-title">helloooooooooooooo</h2>
</div>

Answer 3

如果更改父opacity，则子不透明度属性将来自其父opacity。例如：

parent{opacity:0.8;}
child{opacity:0.8;} // that's means it is 0.8 of parent opacity, so it's 0.64

所以我建议如果可以在其他标记中包含其他内容，并为其添加opacity属性＆amp;另外为h1设置背景：

＆＃13;

.Blog-header-content:hover{  background: rgba(237, 177, 196,0.4) none repeat scroll 0 0 !important ;}
.Blog-header-content:hover p {opacity:0.4}
h2{color:#000;background:#fff;}

＆＃13;

<div class="Blog-header-content">
<p>hihihihhihhihihihhiihhihih</p>
<h2 class="Blog-title">helloooooooooooooo</h2>
</div>

＆＃13;

或者只为新标签设置背景：

＆＃13;

.Blog-header-content:hover p {opacity:0.4;background: rgb(237, 177, 196) none repeat scroll 0 0 !important ;}
h2{color:#000;}

＆＃13;

<div class="Blog-header-content">
<p>hihihihhihhihihihhiihhihih</p>
<h2 class="Blog-title">helloooooooooooooo</h2>
</div>

＆＃13;

在div上应用悬停效果但不在h2上

3 个答案: