悬停文本使 Div 更改颜色 - CSS

Posted 2023-02-21

【中文标题】悬停文本使 Div 更改颜色 - CSS

【英文标题】：Hover Text Make Div Change Colour - CSS

【发布时间】：2016-12-22 02:44:53

【问题描述】：

当文本悬停时，我无法让 div 更改背景颜色。

我为 div.book 使用绝对位置，上面有一个绝对值的文本，因此文本悬停在 div 上，z-index 3 上的文本和 2 上的 div。

当我悬停 div 时，整个背景会发生变化，但是文本覆盖了大部分 div，当它悬停时没有任何变化，所以我尝试了：

h1:hover + div.book 
  background-color: rgba(333, 33, 33, 1);


.book 
  height: 50px;
  

<h1>Book</h1> 
<div class="book"></div>

但我似乎无法让它工作？

有什么想法吗？

提前致谢！

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。请参阅如何创建Minimal, Complete, and Verifiable example。

请添加您的 html，如果没有看到您的 HTML 结构，我们如何才能准确地为您提供解决方案？

<h1>Book</h1> <div class="book"> </div> "Book" 从绝对位置视觉上位于 div 类书籍中，当 h1 悬停时我需要 div class="book" 更改背景颜色。我试过了：h1:hover + div.book background-color:rgba(333,33,33, 1);

好的，我已将您的 html 添加到您的问题中。它似乎工作正常？

请阅读安德烈亚斯在您的问题下方添加的内容......包括所有代码以重现您的问题！ Minimal, Complete, and Verifiable example

【参考方案1】：

将h1 放在<div></div> 中。这两个元素现在将相互重叠。将宽度添加到.book。最后将颜色（=textcolor）设置为透明，这样就不会显示任何字母了。

h1:hover 
  background: red;
  color: rgba(0, 0, 0, 0);


.book 
  height: 50px;
  width: 200px; 
  

<div class="book">
  <h1>Book</h1> 
</div>

【讨论】：

感谢您的帮助，唯一的原因是它的外部是由于我使用的字体导致顶部的间隙太大并且不在中心位置。我已经修复了通过像你说的那样放入内部并使用固定位置而不是绝对位置并将其移动到边缘以居中，感谢您帮助尽管太多人为评论而发表评论希望获得支持。

【参考方案2】：

h1:hover + div.book 
  background-color: rgba(333, 33, 33, 1);


.book position: absolute;    z-index: 2; background-color:rgba(333,33,33, 0.6);width: 230px; height: 60px; border-radius:40px 40px 40px 40px;-moz-border-radius:40px 40px 40px 40px;-webkit-border-radius:40px 40px 40px 40px; border:1px solid #999;
div.book:hoverbackground-color:rgba(333,33,33, 1);
h1 font-family: 'tahoma', cursive; color:#FFF;font-size:48px; text-shadow:3px 3px #000; position:absolute; z-index:3;

<div class="welcome">				
           <center><h1>Book</h1></center>
           <div class="book">
           
         	</div>
</div>