在鼠标悬停时不显示任何内容，无法正常使用CSS [英] display none on hover don't work properly css

问题描述

我在另一个div(2)的顶部有一个div(1)，我希望将div(2)悬停在上面.我这样做与显示:块和悬停显示:无.如果将鼠标悬停，它将无法正常闪烁.一秒钟它隐藏起来，然后又弹出了.我的代码是:

i have a div(1) on top of another div(2) and i want that div(2) hide on hover. i do that with display: block and on hover display: none. This won't work properly it flickers if you hover it. one sec it hides and than it pops up again. my code is:

HTML

<hgroup>
    <article>
        <div class="filter" >

        </div>
    </article>
<hgroup>

CSS;

hgroup {
      position: relative;
      height: 100%;
      overflow: scroll;}

article {   
      background-image:url('../ad-travelfoto.png');
      width: 1000px;
      height: 578px;
      margin: 0 auto;
      margin-top: 100px;
      box-shadow: 1px 0px 7px black;
      background-size: cover;}

article:last-child{
      margin-bottom: 100px;}

.filter {
     background-color: rgba(0,0,0,0.8);
     height: 578px;
     width: 1000px;}

.filter:hover {
     display: none;}

推荐答案

之所以会发生这种情况，是因为一旦显示为无，就不会再在技术上将鼠标悬停在该元素上了.

That's happening because once it displays to none, you're not technically hovered on that element anymore.

尝试使用 opacity:0; 代替

这篇关于在鼠标悬停时不显示任何内容，无法正常使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！