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

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>