-2

我正在寻找一种悬停效果来暂停动画.....

我创建了一个大小为 400x400 的 div 并在该 div 中添加了四个大小为 150x150 的图像，并为每个图像分配了一个大小为 150x150 的单个 div .....

这样就可以在一个 div 中创建四个不同的 div 元素......！

现在我已经使用 css3 动画和 -webkit 框架使四个图像旋转，如上图。现在我想在悬停时暂停此动画，以便在悬停时为每个图像提供气泡消息...

如果我分别对 div1、div2、div3、div4 进行悬停暂停，并且当我悬停时，只有特定图像会暂停，而其他三个图像会继续旋转，看动画看起来很尴尬。

如果我使用暂停悬停到外部 div 内部 div 不会受到影响，动画仍然继续......

当我将鼠标悬停在单个图像上并在取消悬停后继续旋转时，我只需要停止所有四个图像的动画......

我是 CSS 新手，所以尊重你所有的帮助和答案......

这是我使用的代码....

`/* css*/ .div1 { width:170px; 高度：170px；位置：相对；动画：myfirst 5s 无限；动画方向：交替；

                    -webkit-animation:myfirst 5s infinite;
                    -webkit-animation-direction:alternate;
                    -moz-animation:myfirst 5s infinite;
                    -moz-animation-direction:alternate;
                    -o-animation:myfirst 5s infinite;
                    -o-animation-direction:alternate;
                    -ms-animation:myfirst 5s infinite;
                    -ms-animation-direction:alternate;
                }


    @keyframes myfirst
                {
                    0%   { left:0px; top:0px;}
                    25%  { left:150px; top:0px;}
                    50%  { left:150px; top:150px;}
                    75%  { left:0px; top:150px;}
                    100% { left:0px; top:0px;}
                }
@-webkit-keyframes myfirst  /* Safari and Chrome */
                {
                    0%   
                        { 
                            left:0px; 
                            top:0px;
                        }
                    25%  
                        { 
                            left:170px; 
                            top:0px;
                        }
                    50%  
                        { 
                            left:170px; 
                            top:170px;
                        }
                    75%  
                        { 
                            left:0px; 
                            top:170px;
                        }
                    100% 
                        { 
                            left:0px; 
                            top:0px;
                        }
                }

            .div2
                {
                    width:170px;
                    height:170px;
                    position:relative;
                    animation:myfourth 5s infinite;
                    animation-direction:alternate;

                    -webkit-animation:myfourth 5s infinite;
                    -webkit-animation-direction:alternate;
                    -moz-animation:myfourth 5s infinite;
                    -moz-animation-direction:alternate;
                    -o-animation:myfourth 5s infinite;
                    -o-animation-direction:alternate;
                    -ms-animation:myfourth 5s infinite;
                    -ms-animation-direction:alternate;
                }
    @keyframes myfourth
                {
                    0%   { left:0px; top:150px;}
                    25%  { left:0px; top:0px;}
                    50%  { left:150px; top:0px;}
                    75%  { left:150px; top:150px;}
                    100% { left:0px; top:150px;}
                }

    @-webkit-keyframes myfourth  /* Safari and Chrome */
                {
                    0%   
                        { 
                            left:0px; 
                            top:170px;
                        }
                    25%  
                        { 
                            left:0px; 
                            top:0px;
                        }
                    50%  
                        { 
                            left:170px; 
                            top:0px;
                        }
                    75%  
                        { 
                            left:170px; 
                            top:170px;
                        }
                    100% 
                        { 
                            left:0px; 
                            top:170px;
                        }
                }

            .div3
                {
                    width:170px;
                    height:170px;
                    position:relative;
                    animation:mysecond 5s infinite;
                    animation-direction:alternate;

                    -webkit-animation:mysecond 5s infinite;
                    -webkit-animation-direction:alternate;
                    -moz-animation:mysecond 5s infinite;
                    -moz-animation-direction:alternate;
                    -o-animation:mysecond 5s infinite;
                    -o-animation-direction:alternate;
                    -ms-animation:mysecond 5s infinite;
                    -ms-animation-direction:alternate;
                }


    @keyframes mysecond
                {
                    0%   { left:150px; top:0px;}
                    25%  { left:150px; top:150px;}
                    50%  { left:0px; top:150px;}
                    75%  { left:0px; top:0px;}
                    100% { left:150px; top:0px;}
                }
@-webkit-keyframes mysecond  /* Safari and Chrome */
                {
                    0%   
                        { 
                            left:170px; 
                            top:0px;
                        }
                    25%  
                        { 
                            left:170px; 
                            top:170px;
                        }
                    50%  
                        { 
                            left:0px; 
                            top:170px;
                        }
                    75%  
                        { 
                            left:0px; 
                            top:0px;
                        }
                    100% 
                        { 
                            left:170px; 
                            top:0px;
                        }
                }

            .div4
                {
                    width:170px;
                    height:170px;
                    position:relative;
                    animation:mythird 5s infinite;
                    animation-direction:alternate;

                    -webkit-animation:mythird 5s infinite;
                    -webkit-animation-direction:alternate;
                    -moz-animation:mythird 5s infinite;
                    -moz-animation-direction:alternate;
                    -o-animation:mythird 5s infinite;
                    -o-animation-direction:alternate;
                    -ms-animation:mythird 5s infinite;
                    -ms-animation-direction:alternate;
                }


    @keyframes mythird
                {
                    0%   { left:150px; top:150px;}
                    25%  { left:0px; top:150px;}
                    50%  { left:0px; top:0px;}
                    75%  { left:150px; top:0px;}
                    100% { left:150px; top:150px;}
                }
@-webkit-keyframes mythird  /* Safari and Chrome */
                {
                    0%   
                        { 
                            left:170px; 
                            top:170px;
                        }
                    25%  
                        { 
                            left:0px; 
                            top:170px;
                        }
                    50%  
                        { 
                            left:0px; 
                            top:0px;
                        }
                    75%  
                        { 
                            left:170px; 
                            top:0px;
                        }
                    100% 
                        { 
                            left:170px; 
                            top:170px;
                        }
                }
4

1 回答 1

0

你可以这样做，如果你悬停父元素，另一个元素中的不同元素会获得新的 css 值：

#parent:hover div{
    background-color:red;
}

看看这个小提琴

编辑

对此案例的评论后的灵魂：

#parent:hover img{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

小提琴

于 2013-07-29T07:57:04.197 回答