在悬停时显示/隐藏 div 并悬停
Posted
技术标签:
【中文标题】在悬停时显示/隐藏 div 并悬停【英文标题】：show/hide a div on hover and hover out 【发布时间】：2012-06-22 07:02:57 【问题描述】：我想在悬停和悬停期间显示和隐藏 div。
这是我最近所做的。
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" id="menu_link" /></a>
</div>
<div class="flyout hidden"> </div>我的问题是，当我将鼠标悬停在菜单 id 上时，弹出 div 正在闪烁。 这是为什么呢？
【问题讨论】：
当我用 Firefox 尝试它时它工作（不闪烁）：jsfiddle.net/dxWXU 【参考方案1】：为什么不直接使用.show()/.hide()？
$("#menu").hover(function()
$('.flyout').show();
,function()
$('.flyout').hide();
);
【讨论】：
@nnnnnn 显示/隐藏使用display 而不是visibility，区别在于visibility 仍将保持不变，而display 不会。操作码可能会受到他的其他html代码的影响。
当然，我理解display 和visibility 之间的区别 - 我的意思是为什么 OP 的代码会导致任何闪烁而你的代码不会？ （我更喜欢你的解决方案，但我不明白为什么会有帮助。）【参考方案2】：
可能不需要JS。您也可以使用 css 来实现这一点。像这样写：
.flyout
position: absolute;
width: 1000px;
height: 450px;
background: red;
overflow: hidden;
z-index: 10000;
display: none;
#menu:hover + .flyout
display: block;
【讨论】：
你能解释一下 + .flyout 吗？ 它被称为相邻兄弟组合器。更多信息请阅读w3.org/wiki/CSS/Selectors/combinators/adjacent display:inline-block 让元素按流顺序出现。【参考方案3】：这里有不同的方法。而且我发现你的代码运行良好。
您的代码：http://jsfiddle.net/NKC2j/
Jquery 切换类演示：http://jsfiddle.net/NKC2j/2/
Jquery 淡入淡出切换：http://jsfiddle.net/NKC2j/3/
jQuery 滑动切换：http://jsfiddle.net/NKC2j/4/
您可以使用 Sandeep
回答的 CSS 来做到这一点【讨论】：
【参考方案4】：我发现使用 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】：<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>
你的 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】：您可以使用 jQuery 显示 div，并将其设置在鼠标所在的任何位置：
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>
风格：
#trigger
border: 1px solid black;
#secret
display:none;
top:0;
position:absolute;
background: grey;
color:white;
width: 50%;
js:
$("#trigger").hover(function(e)
$("#secret").show().css('top', e.pageY + "px").css('left', e.pageX + "px");
,function(e)
$("#secret").hide()
)
您可以在此处找到示例 干杯! http://plnkr.co/edit/LAhs8X9F8N3ft7qFvjzy?p=preview
【讨论】：
以上是关于在悬停时显示/隐藏 div 并悬停的主要内容，如果未能解决你的问题，请参考以下文章