3

假设我有三个未知高度的 div，其中一个具有使用 CSS 关键帧动画的动画背景颜色（请参阅http://css-tricks.com/color-animate-any-shape-2）

@-webkit-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}
@-moz-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}

现在，还有另外两个具有白色背景的 div。在悬停时，我希望那些白色 div 也具有与永久颜色动画同步的动画背景颜色。我知道不支持本机同步（请参阅如何跨多个元素同步 CSS 动画？）。

我的第一种方法是让三个 div 都具有动画背景颜色，并用相对定位的白色 div 覆盖其中两个。在悬停时，那些白色的 div 会变得透明并显示带有动画背景的 div（参见http://jsfiddle.net/Vzq4B）

#permanent {
    height: 100px;
    margin-bottom: 15px;
    width: 100%;
    -webkit-animation: super-rainbow 5s infinite linear; 
       -moz-animation: super-rainbow 5s infinite linear;
}
#hover {
    position: relative;
    top: -115px;
    margin-bottom: -100px;
    height: 100px;
    width: 100%;
    background: #fff;
}
#hover:hover {
    background-color: transparent;
}

但是，这种方法只有在我知道元素的高度时才有效，因为内容是可变的，所以我不知道。

对于未知高度的div，还有哪些其他方法可以实现这种效果？

4

2 回答 2

6

尝试将您的 DIV 放在运行动画的父容器中。然后子容器可以容纳内容并具有白色背景，在悬停时使用 CSS 变为透明。

HTML：

<div id="container">
   <div id="child">Your content.</div>
</div>

CSS：

#container { animation: super-rainbow 5s infinite linear; }
#child {background-color: white;}
#child:hover {background-color: transparent;}

这是一个小提琴http://jsfiddle.net/bejnar/Vzq4B/4/

于 2013-07-19T11:13:55.320 回答
0

你为什么不试试这个：

#hover:hover {
     height: auto;
    width: 100%;
    outline: 1px solid #999; /* only style */
    -webkit-animation: super-rainbow 5s infinite linear; 
       -moz-animation: super-rainbow 5s infinite linear;
    cursor: pointer;
}

有一个链接：http: //jsfiddle.net/nmL9s/ 谢谢...

于 2013-07-18T10:57:50.150 回答