我有两个div元素，我想要两个时候都悬停CSS的脉动 [英] I have two div elements that I want both to CSS pulsate when hovering either

问题描述

我有两个div元素，我想要两个puslate（CSS动画），如果鼠标悬停在任何一个。有一个简单的代码。在我的页面中，他们不是彼此相邻。上面的代码不工作。

I have two div elements that I want both to puslate (CSS animation) if mouse hovers on any one of them. There a simple code following. In my page they are not next each other. The above code does not works.

jsfiddle： http://jsfiddle.net/GcyqL / 1 /

jsfiddle: http://jsfiddle.net/GcyqL/1/

CSS ：

#counter {
   width:120px;
   height:25px;
   text-align: center;
   border-style: solid;
   border-width: 1px;
   background-color: rgb(142, 197, 255);
   font-weight: bold;
}

#mem_val {
   width:120px;
   height:25px;
   text-align: center;
   border-style: solid;
   border-width: 1px;
   background-color: rgb(142, 197, 255);
   font-weight: bold;
}

div.intro:hover{
   -webkit-animation: pulsate 1s infinite alternate;
   -moz-animation: pulsate 1s infinite alternate;
   -animation: pulsate 1s infinite alternate;
   text-shadow: 0 0 8px #ccc;
}

@-webkit-keyframes pulsate {
   from { box-shadow: 0 0 10px #333; }
   to { box-shadow: 0 0 20px #c00; }
}

@-moz-keyframes pulsate {
   from { box-shadow: 0 0 10px #333; }
   to { box-shadow: 0 0 20px #c00; }
}

@keyframes pulsate {
   from { box-shadow: 0 0 10px #333; }
   to { box-shadow: 0 0 20px #c00; }
}

HTML

<div id="mem_val" class="intro" >mem_val</div><br><br>
<div id="counter" class="intro">counter</div><br><br>

推荐答案

如果你只想使用CSS，可以将它们添加到同一个容器并使用容器的 hover 选择器。

If you want to do it only with CSS, you can add them both to the same container and use the container's hover selector.

请注意，即使容器悬停在这两个元素之外，此解决方案也会使 hover 动画。你可以用一个小技巧来解决这个问题，这将使容器保持隐形，虽然它可能有点不灵活。

Notice that this solution will make the hover animation even if the container is being hovered outside of these two elements. You can walk around this issue with a little trick that'll make the container stay "invisible", although it might be a bit non-flexible.

jsFiddle演示

#container {
    width:0;
    height:0;
    overflow: visible;
}

/* Old selector: div.intro:hover */
#container:hover div.intro {
    -webkit-animation: pulsate 1s infinite alternate;
    -moz-animation: pulsate 1s infinite alternate;
    -animation: pulsate 1s infinite alternate;
    text-shadow: 0 0 8px #ccc;
}

这篇关于我有两个div元素，我想要两个时候都悬停CSS的脉动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！