Question

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

为了学习CSS动画，我正在努力做到this site的100％CSS版本。

我遇到的障碍是，当我将鼠标悬停在“白色”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，则后台需要是要启动动画的元素的子元素或兄弟元素。在你的情况下，一个元素有一些文本。

非首选解决方案

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

嵌套元素：<h1>Rainbow<div class="rainbow"></div></h1>或
在文本元素上使用CSS创建一个伪元素。

获取父元素的子元素＆＃34; out＆＃34; 的方式是通过绝对定位。这会将元素拉伸到下一个定位的祖先元素的边缘。

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

使用某种形式的子元素的问题是，如果你需要定位父文本元素，那么背景就不像你喜欢的那样伸展开来。父文本元素的定位将为绝对定位的子背景元素创建一个新的上下文。

更新：您可以使用position: fixed;，但其他position值无效。感谢@Green以及我们对此更新答案的讨论。如果您在文本元素上使用了translate，在动画背景元素上使用了position: fixed;，则会will not work properly either。

首选解决方案（已更新）

*已更新，因此动画不会在每次隐藏/显示时重新启动。

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

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

<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

在这两个解决方案中，您需要一个填充整个视口的祖先元素，以便您的绝对定位背景元素也可以。

Answer 2

这是JSFiddle。

只需使用：

pointer-events: none;

:before或:after。

创建伪元素，将其相对于根/视口定位，并调整视口/网站的宽度和高度。然后应用您想要的任何其他样式。

这是一个干净漂亮的解决方案。至少我是这么认为的。

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

2 个答案:

非首选解决方案

首选解决方案（已更新）