显示/隐藏一个div在悬停和悬停。

时间：2022-11-05 07:26:14

I would like to show and hide a div during hover and hover out.

我想在悬停和悬停期间显示和隐藏一个div。

here's what I've done lately.

这是我最近做的。

css

css

$("#menu").hover(function() {
  $('.flyout').removeClass('hidden');
}, function() {
  $('.flyout').addClass('hidden');
});
.flyout {
  position: absolute;
  width: 1000px;
  height: 450px;
  background: red;
  overflow: hidden;
  z-index: 10000;
}

.hidden {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="menu" class="margint10 round-border">
  <a href="#"><img src="images/menu.jpg" alt="" id="menu_link" /></a>
</div>
<div class="flyout hidden">&nbsp;</div>

My problem is that when I hover on the menu id, the flyout div is blinking. why is that?

我的问题是当我悬停在菜单id上时，弹出div会闪烁。这是为什么呢?

6 个解决方案

#1

27  

May be there no need for JS. You can achieve this with css also. Write like this:

可能不需要JS。你也可以用css实现这一点。这样写:

.flyout {
    position: absolute;
    width: 1000px;
    height: 450px;
    background: red;
    overflow: hidden;
    z-index: 10000;
    display: none;
}
#menu:hover + .flyout {
    display: block;
}

#2

28  

Why not just use .show()/.hide() instead?

为什么不直接使用.show()/.hide()呢?

$("#menu").hover(function(){
    $('.flyout').show();
},function(){
    $('.flyout').hide();
});

#3

15  

Here are different method of doing this. And i found your code is even working fine.

这里有不同的方法。我发现你的代码运行得很好。

Your code: http://jsfiddle.net/NKC2j/

代码:http://jsfiddle.net/NKC2j/

Jquery toggle class demo: http://jsfiddle.net/NKC2j/2/

Jquery toggle类演示:http://jsfiddle.net/NKC2j/2/

Jquery fade toggle: http://jsfiddle.net/NKC2j/3/

Jquery褪色切换:http://jsfiddle.net/NKC2j/3/

Jquery slide toggle: http://jsfiddle.net/NKC2j/4/

Jquery幻灯片切换:http://jsfiddle.net/NKC2j/4/

And you can do this with CSS as answered by Sandeep

你可以用Sandeep的CSS来做

#4

4  

I found using css opacity is better for a simple show/hide hover, and you can add css3 transitions to make a nice finished hover effect. The transitions will just be dropped by older IE browsers, so it degrades gracefully to.

我发现使用css不透明度对于简单的显示/隐藏悬停效果更好，并且您可以添加css3过渡来实现一个很好的完成悬停效果。这些转换将被旧的IE浏览器删除，因此它会优雅地降级为。

JS fiddle Demo

CSS

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

HTML

<div id="hover">Hover</div>
<div id="stuff">stuff</div>

#5

3  

<script type="text/javascript">
    var IdAry=['reports1'];
    window.onload=function() {
     for (var zxc0=0;zxc0<IdAry.length;zxc0++){
      var el=document.getElementById(IdAry[zxc0]);
      if (el){
       el.onmouseover=function() {
         changeText(this,'hide','show')
        }
       el.onmouseout=function() {
         changeText(this,'show','hide');
        }
      }
     }
    }
    function changeText(obj,cl1,cl2) {
       obj.getElementsByTagName('SPAN')[0].className=cl1;
       obj.getElementsByTagName('SPAN')[1].className=cl2;
    }
</script>

ur html should look like this

你的html应该是这样的

<p id="reports1">
                <span id="span1">Test Content</span>
                <span class="hide">

                    <br /> <br /> This is the content that appears when u hover on the it
                </span>
            </p>

#6

0  

You could use jQuery to show the div, and set it at wherever your mouse is:

您可以使用jQuery来显示div，并将其设置到鼠标所在的位置:

html:

html:

<!DOCTYPE html>
<html>

  <head>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>

  <body>
    <div id="trigger">
      <h1>Hover me!</h1>
      <p>Ill show you wonderful things</p>
    </div>
    <div id="secret">
     shhhh
    </div>
    <script src="script.js"></script>
  </body>

</html>

styles:

风格:

#trigger {
  border: 1px solid black;
}
#secret {
  display:none;
  top:0;  
  position:absolute;
  background: grey;
  color:white;
  width: 50%;
}

js:

js:

$("#trigger").hover(function(e){
    $("#secret").show().css('top', e.pageY + "px").css('left', e.pageX + "px");
  },function(e){
    $("#secret").hide()
})

You can find the example here Cheers! http://plnkr.co/edit/LAhs8X9F8N3ft7qFvjzy?p=preview

您可以在这里找到示例，干杯!http://plnkr.co/edit/LAhs8X9F8N3ft7qFvjzy?p=preview

#1

27  

May be there no need for JS. You can achieve this with css also. Write like this:

可能不需要JS。你也可以用css实现这一点。这样写:

.flyout {
    position: absolute;
    width: 1000px;
    height: 450px;
    background: red;
    overflow: hidden;
    z-index: 10000;
    display: none;
}
#menu:hover + .flyout {
    display: block;
}

#2

28  

Why not just use .show()/.hide() instead?

为什么不直接使用.show()/.hide()呢?

$("#menu").hover(function(){
    $('.flyout').show();
},function(){
    $('.flyout').hide();
});

#3

15  

Here are different method of doing this. And i found your code is even working fine.

这里有不同的方法。我发现你的代码运行得很好。

Your code: http://jsfiddle.net/NKC2j/

代码:http://jsfiddle.net/NKC2j/

Jquery toggle class demo: http://jsfiddle.net/NKC2j/2/

Jquery toggle类演示:http://jsfiddle.net/NKC2j/2/

Jquery fade toggle: http://jsfiddle.net/NKC2j/3/

Jquery褪色切换:http://jsfiddle.net/NKC2j/3/

Jquery slide toggle: http://jsfiddle.net/NKC2j/4/

Jquery幻灯片切换:http://jsfiddle.net/NKC2j/4/

And you can do this with CSS as answered by Sandeep

你可以用Sandeep的CSS来做

#4

4  

I found using css opacity is better for a simple show/hide hover, and you can add css3 transitions to make a nice finished hover effect. The transitions will just be dropped by older IE browsers, so it degrades gracefully to.

我发现使用css不透明度对于简单的显示/隐藏悬停效果更好，并且您可以添加css3过渡来实现一个很好的完成悬停效果。这些转换将被旧的IE浏览器删除，因此它会优雅地降级为。

JS fiddle Demo

CSS

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

HTML

<div id="hover">Hover</div>
<div id="stuff">stuff</div>

#5

3  

<script type="text/javascript">
    var IdAry=['reports1'];
    window.onload=function() {
     for (var zxc0=0;zxc0<IdAry.length;zxc0++){
      var el=document.getElementById(IdAry[zxc0]);
      if (el){
       el.onmouseover=function() {
         changeText(this,'hide','show')
        }
       el.onmouseout=function() {
         changeText(this,'show','hide');
        }
      }
     }
    }
    function changeText(obj,cl1,cl2) {
       obj.getElementsByTagName('SPAN')[0].className=cl1;
       obj.getElementsByTagName('SPAN')[1].className=cl2;
    }
</script>

ur html should look like this

你的html应该是这样的

<p id="reports1">
                <span id="span1">Test Content</span>
                <span class="hide">

                    <br /> <br /> This is the content that appears when u hover on the it
                </span>
            </p>

#6

0  

You could use jQuery to show the div, and set it at wherever your mouse is:

您可以使用jQuery来显示div，并将其设置到鼠标所在的位置:

html:

html:

<!DOCTYPE html>
<html>

  <head>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>

  <body>
    <div id="trigger">
      <h1>Hover me!</h1>
      <p>Ill show you wonderful things</p>
    </div>
    <div id="secret">
     shhhh
    </div>
    <script src="script.js"></script>
  </body>

</html>

styles:

风格:

#trigger {
  border: 1px solid black;
}
#secret {
  display:none;
  top:0;  
  position:absolute;
  background: grey;
  color:white;
  width: 50%;
}

js:

js:

$("#trigger").hover(function(e){
    $("#secret").show().css('top', e.pageY + "px").css('left', e.pageX + "px");
  },function(e){
    $("#secret").hide()
})

You can find the example here Cheers! http://plnkr.co/edit/LAhs8X9F8N3ft7qFvjzy?p=preview

您可以在这里找到示例，干杯!http://plnkr.co/edit/LAhs8X9F8N3ft7qFvjzy?p=preview

标签：

相关文章