当另一个div处于动画状态时,显示div闪烁

时间:2019-01-24 10:02:10

标签: html css

基于这个问题add a class without jquery if hover another class

我有一个div将通过将span元素悬停显示。

那很好。

现在我在站点中又有一个div,它是用animate.css动画制作的。

如果上方的div从display:none更改为display:block,则div闪烁/颤动。

(如果我使用jquery更改了CSS,则div dosnt闪烁-有什么不同?)

在此代码段中,它工作正常,我不知道为什么在我的页面上它不起作用?

   

 .cl_maindiv>.cl_span_icon:not(:hover)+.cl_icon_content{
      /*Styles without :hover*/
      display:none;
    }
    .cl_maindiv>.cl_span_icon:hover+.cl_icon_content{
      /*Styles with :hover*/
      display:block;
    text-align: center;
    position: absolute;
    font-size: 9px;
    top: 1px;
    margin: 0px;
    right: 14px;
    background-color: rgba(68, 68, 68, 0.90);
    border-radius: 2px;
    border: 1px solid rgba(50, 197, 210, 0.90);
    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.25);
    min-width: 30px;
    color: #ddd;
    text-shadow: 0 -1px 0 #111;
    }
<div id="maindiv" class="cl_maindiv" style="float:left;border:1px solid #ff0000;">
    <label>123</label>
    <span class="cl_span_icon"> :-)) </span>
    <div id="icon_content_div" class="cl_icon_content"> more happy faces :-))</div>                              
</div>
<link rel="stylesheet" href="https://www.4u.tools/assets/plugins/animate.css-master/animate.min.css">
<div id="animdiv" class="animated pulse" style="animation-iteration-count: infinite; float:left;border:1px solid #ff0000;"> <h2>I'm a animated div!</h2></div>

有没有办法解决这个问题?

非常感谢。

1 个答案:

答案 0 :(得分:0)

我在他们旁边的另一个div的CSS中找到了answear。

添加:溢出:隐藏;解决了闪烁的问题;-)

非常感谢!