html - 悬停文本时更改父 div 背景颜色

Question

我看过一些关于此的类似帖子，但似乎没有一个能回答这个问题。

为了学习 CSS 动画，我尝试制作一个 100% CSS 版本的 this site .

我遇到的问题是当我将鼠标悬停在“whitey”div 上时我可以让它执行“彩虹动画”，但我希望它只在我将鼠标悬停在“彩虹”这个词上时执行此操作。是否有我可以将鼠标悬停在文本上时将“whitey”div 的不透明度设置为 0 的方法吗？

#bg {
   /*BASIC DIV STYLING*/
    width: 500px;
    height: 250px;
    font-size:50px;
    line-height:250px;
    text-align:center;
    position: relative;
    font-family:sans-serif;
    
    /*ANIMATION INFORMATION*/
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count:infinite;
}

/*DISPLAY CONTENT ON A WHITE BACKGROUND*/
.whitey {
  background-color:white;
  width:500px;height:250px;
}
/*MAKE THE WHITE BACKGROUND DISAPPEAR ON HOVER*/
.whitey:hover{
   background-color: rgba(0, 0, 0, 0);
  }
  
/*THE ANIMATION*/
@keyframes example {
0% {background-color: #ff0000;}
10% {background-color: #ff8000;}
20% {background-color: #ffff00;}
30% {background-color: #80ff00;}
40% {background-color: #00ff00;}
50% {background-color: #00ff80;}
60% {background-color: #00ffff;}
70% {background-color: #0080ff;}
80% {background-color: #0000ff;}
90% {background-color: #8000ff;}
100% {background-color: #ff0080;}
}
}

<div id="bg">

<div class="whitey">

<p>
RAINBOW
</p>

</div>
</div>

Answer 1

如果不使用 JS，背景必须是要启动动画的元素的子元素或兄弟元素。在您的情况下，一个元素带有一些文本。

非首选方案

有几种方法可以将背景动画元素作为文本元素的子元素。

1. 嵌套元素:<h1>Rainbow<div class="rainbow"></div></h1>或
2. 在文本元素上使用 CSS 创建伪元素。

从父元素中获取子元素“out”的方法是通过绝对定位。这会将元素拉伸(stretch)到下一个定位的祖先元素的边缘。

.rainbow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/* or */
h1:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;        
}

使用某种形式的子元素的问题在于，如果您需要定位父文本元素，那么背景不会像您希望的那样被拉伸(stretch)。父文本元素的定位将为绝对定位的子背景元素创建新的上下文。

更新:您可以使用 position: fixed; 虽然其他position值将不起作用。感谢@Green 以及我们对他对此更新的回答的讨论。这will not work properly either如果你使用 translate在文本元素和 position: fixed; 上在动画背景元素上。

首选解决方案(更新)

* 更新后动画不会在每次隐藏/显示时重新启动。

所以我建议使用兄弟元素方法。这将允许您在不限制背景元素(即元素/页面的中心)的情况下定位文本元素。

由于您的示例页面使用元素来隐藏/显示动画背景，您也可以。立即应用动画并使用兄弟选择器隐藏/显示隐藏/显示动画背景的元素。

<h1>Rainbow</h1>
<div class="lid"></div>
<div class="rainbow"></div>

html,
body {
  position: relative;
  height: 100%;
  margin: 0;
}
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
}
.lid,
.rainbow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.lid {
  background-color: white;
  z-index: -1;
}
.rainbow {  
  animation-name: rainbow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  z-index: -2;
}
h1:hover + .lid {
  display: none;
}

@keyframes rainbow {
  0%   { background-color: #ff0000; }
  10%  { background-color: #ff8000; }
  20%  { background-color: #ffff00; }
  30%  { background-color: #80ff00; }
  40%  { background-color: #00ff00; }
  50%  { background-color: #00ff80; }
  60%  { background-color: #00ffff; }
  70%  { background-color: #0080ff; }
  80%  { background-color: #0000ff; }
  90%  { background-color: #8000ff; }
  100% { background-color: #ff0080; }
}

演示 JSFiddle , 已更新。

• > Sibling Selector Browser Support

在这两种解决方案中，您都需要一个填充整个视口(viewport)的祖先元素，这样您的绝对定位背景元素也能做到这一点。