在悬停列表项目时显示div，并使其保持可见，直到新的悬停在另一个列表元素上
，可以通过以下步骤实现：
- 首先，为列表元素添加一个悬停事件监听器。可以使用JavaScript或jQuery来实现。例如，使用JavaScript的addEventListener方法：
var listItems = document.querySelectorAll('.list-item');
listItems.forEach(function(item) {
item.addEventListener('mouseover', function() {
// 在这里显示div
});
});- 在悬停事件的处理程序中，显示要显示的div。可以通过设置div的CSS属性来实现。例如，将div的display属性设置为"block"或"inline-block"，将其可见。
var divToDisplay = document.getElementById('div-to-display');
listItems.forEach(function(item) {
item.addEventListener('mouseover', function() {
divToDisplay.style.display = 'block';
});
});- 为了保持div可见，直到新的悬停在另一个列表元素上，可以使用mouseleave事件来隐藏div。在mouseleave事件的处理程序中，将div的display属性设置为"none"，将其隐藏。
listItems.forEach(function(item) {
item.addEventListener('mouseleave', function() {
divToDisplay.style.display = 'none';
});
});这样，当鼠标悬停在列表项目上时，div将显示出来，并保持可见，直到鼠标离开列表项目。当鼠标悬停在另一个列表元素上时，div将隐藏，并在新的列表项目上显示。
相关·内容
3回答
防止意外事件在元素上冒泡
css、dom、jquery
我试图在列表元素上创建一个简单的悬停效果。但是，当鼠标悬停在列表项上时，显示的元素之间有一个很小的间隙。这会强制触发事件mouseleave，这是不需要的。
这是演示。将鼠标悬停在列表项上后，尝试转到小方框。
HTML：
<ul>
<li>test <div class="block">Block</div></li>
<li>test2 <div class="block">Block descriptions</div></li>
&l
浏览 0提问于2012-08-20得票数 1
回答已采纳
2回答
jQuery在下拉菜单中仅选择父li
javascript、jquery、html
我正在试图弄清楚如何使此淡入淡出效果仅在我将鼠标悬停在家长李的上时发生，但当我将鼠标悬停在下拉列表中的项目上时，它似乎也会淡入和淡出？
有什么想法吗？
我已经在这里尝试了一大堆例子，但我似乎无法弄明白这一点，这真的开始困扰我了！
感谢堆的朋友们！
<style type="text/css">
/*style the main menu*/
.myMenu {
margin:0;
padding:0;
}
.myMenu li {
list-style:none;
float:left;
font:12px Arial,
浏览 2提问于2013-04-25得票数 1
9回答
如何禁用子元素触发的mouseout事件？
javascript、jquery、events
让我详细描述一下这个问题：
当悬停在一个元素上时，我想显示一个绝对定位的div。对于jQuery来说，这非常简单，并且工作得很好。但是当鼠标移到其中一个子元素上时，它会触发包含div的mouseout事件。如何防止javascript在悬停子元素时触发包含元素的mouseout事件。
用jQuery做到这一点的最好和最快捷的方法是什么？
这里有一个简单的例子来说明我的意思：
Html：
<a>Hover Me</a>
<div>
<input>Test</input>
<select>
<option
浏览 7提问于2008-12-08得票数 109
回答已采纳
2回答
允许鼠标悬停在工具提示上
jquery、css
我创建了一个工具提示div，当鼠标悬停在菜单按钮上时，工具提示就会出现，当你鼠标悬停在按钮上时，工具提示就会出现，当你鼠标移出时，工具提示就会消失，但我想要能够滚动到子菜单(这里是#submenu.Solutions)，我不知道该怎么做，我试着设置一个超时和一个变量来查看是否有鼠标悬停在子菜单上，但它就是出了问题。
我最近添加了mousemove，看看我是否可以在宽度和高度上做些什么，但我有点困惑。所以我就把它放在那里让你看看。
$('#btnSolutions').mouseover(function() {
$('#btnSolutions').cs
浏览 5提问于2012-11-11得票数 0
回答已采纳
2回答
元素使用鼠标悬停/移出div的子元素进行剪切
jquery、mouseover、mouseout
我希望在悬停div时显示其中的一些按钮。
示例
// HTML
<div id="overdiv">
<p>Move your mouse several times on this text to see the bug</p>
<input type="button" value="hello" class="elements"/>
</div>
// CSS
#overdiv {background:#CCC;border:1px solid #FFF;wid
浏览 1提问于2012-08-08得票数 0
回答已采纳
2回答
jQuery / Javascript检查鼠标是在窗口内还是窗口外
javascript、jquery、html、css
我在鼠标输入时显示/隐藏此菜单时遇到一些问题。我希望当鼠标接近标题区域时，菜单会显示出来，直到鼠标离开标题区域。
问题是当鼠标退出页面时，因为mouseleave功能会触发并隐藏我的菜单(如果菜单本身没有锁定)
我设置了一个jsfiddle来更好地解释。
<html>
<header>
<nav>
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href=
浏览 2提问于2012-04-01得票数 1
回答已采纳
3回答
CSS:悬停在一个DIV中，如何显示来自另一个DIV的信息？
html、css、hover
我得到了一个包含3个项目的列表。将鼠标悬停在项目上时，将显示信息。在相同的<DIV>中运行良好。如何显示来自另一个<DIV>的信息，我想这应该是可能的，不是吗？
最初只显示三个列表。当鼠标悬停在“清单2”上时，可以显示“#special”的内容，没有问题。
当鼠标悬停在“清单3”上时，没有显示“#AlsoSpecial”的内容，为什么？有什么补救办法吗？
示例HTML：
<div id="top">
<ul>
<li class="left">listing 1</li>
浏览 0提问于2011-08-30得票数 1
回答已采纳
2回答
jQuery显示/隐藏面板，然后悬停在面板中的内容上
javascript、jquery、show-hide
我有一个项目列表，其中我想显示一个相关的面板，如果项目列表项目是悬停的。我已经开始工作了，但问题是，在使用mouseleave函数时，由于明显的原因，一旦我在链接列表项上徘徊，就不能在面板中的内容上悬停。
我已经做了几天了，并且无法确定需要做些什么才能让相关面板打开，这样我就可以悬停在它上面，并在其中单击read链接。
我尝试在面板中添加一个悬停状态下的类，但这似乎也不起作用。
我的HTML是：
<div id="item-wrapper">
<ul>
<li><a href="#" id=
浏览 4提问于2013-08-27得票数 0
回答已采纳
需要一些帮助来分配鼠标悬停事件来显示一些开始隐藏的图标。
对于ul中的每个<li>，我都有图标。当用户将鼠标悬停在图标上时，我希望显示带有名为“<li>”的类的span标记。当鼠标移出事件发生时，删除类和/或只是隐藏跨度。对我来说，问题是如何分配事件，以便当鼠标悬停在<li>上时，只有span标记及其内容出现和消失。
下面是HTML：
<ul id="nav">
<li>Cat 1
<span class="icons">
<d
浏览 0提问于2010-03-27得票数 0
回答已采纳
1回答
我想做onclick这个函数，我该怎么做？
javascript
当鼠标悬停在窗体的底部，但我想游泳的时候，它就会被点击
$("document").ready(function () {
$(".secenek-alani .secenek-sol-taraf").mouseover(function () {
$(".secenek-alani .hesap-alani-1").css("display","block")
})
浏览 0提问于2016-01-26得票数 0
5回答
Javascript的鼠标输入输出事件
javascript、jquery、asp.net
来自初学者的问题..
当鼠标从父div进入/退出时，我想显示/隐藏一个内部div。我首先尝试了onmouseover，onmouseout事件，但问题是当鼠标悬停在div上时，onmouseover一直在触发，我希望它只触发一次。
我找到了可能对我有帮助的事件，但是我不知道我可以把这段代码放在哪里，因为我的div存在于控件的模板中，而div没有onload事件。
<script type="text/javascript" language="javascript">
// Where should I call this !!!
f
浏览 2提问于2011-03-17得票数 1
回答已采纳
6回答
为什么我的鼠标输出fadeOut可以工作，然后又淡入了？
jquery、html、css
我有一个div，里面有一个嵌套的元素，当鼠标悬停在div上时，它会显示出来。这是可行的。
在mouseout时，嵌套的元素应该隐藏，但随后立即淡入，就像我刚刚将鼠标悬停在初始div上一样。
我做了。
html为：
<div class="add_bag_large_wrap">
<div class="add_bag_large_droid" style="margin: 90px auto;">
I am a button.
<div class="add_includes"
浏览 0提问于2012-08-17得票数 0
回答已采纳
4回答
为什么live()和load()不能工作？
jquery
我有一个页面，当它在页面加载时呈现时，它可以完美地工作。(当我将鼠标悬停在这些行上时，这些行应该会突出显示。)
当我通过jQuery load事件加载页面时，页面呈现完美，但是当鼠标悬停在上面时，行不会突出显示。
我很确定问题是DOM在加载时没有被更新。通常，这很容易通过集成实时事件来解决。
不过，这是行不通的。你知道为什么它不工作吗？
<script type="text/javascript">
$(document).ready(function() {
$("#ListByFranchisor").live("click"
浏览 0提问于2011-07-26得票数 0
回答已采纳
3回答
jquery在mouseenter上显示一个元素
javascript、jquery、html、css
正如标题所说，当鼠标悬停在元素上时，我希望元素淡入。
<div class="carousel-item">
<div class="carousel-item-top">
<img class="img-responsive" alt="a" src="carousel/crsl-img-1.png">
<div class="carousel-item-top-hover"></div>
浏览 0提问于2014-01-05得票数 0
1回答
如何删除子导航重叠？
javascript、jquery、navigation、hover、submenu
我正在尝试创建一个子导航。现在我有两个潜航器。当我将鼠标悬停在主菜单上的第一项上时，会出现相应的子菜单。但当我将鼠标悬停在第二个项目上时，第二个子导航就会出现在第一个项目上。我如何编写代码才不会发生这种情况？
网址：
$(document).ready(function() {
$('#arbNavText01').mouseover(function() {
$('#subNav01').show('slow');
});
$('#subNav01')
浏览 0提问于2011-12-13得票数 0
回答已采纳
2回答
如何在悬停的div1上显示div2，鼠标上显示衰落的div1？
javascript、jquery、html、css
只有当鼠标没有悬停div1和div2 2时，我才希望在悬停的div1 div2上显示div1，并消失div1。
我尝试使用以下CSS和jquery。但是 div1 在没有悬停的div2之后消失了，我无法访问div1的内容。
$(document).ready(function() {
$('.about').hover(
function() {
$('.showsection').slideDown(800).addClass('show');
}
, function
浏览 0提问于2019-02-23得票数 1
回答已采纳
2回答
简单的悬停控件
javascript、jquery、onmouseover、onmouseout
所以我只有几个方块，当我将鼠标悬停在一个方块上时，我希望出现一个菜单。然后，当我悬停的时候，我想让它消失。很简单，对吧？
所以问题是，当我将鼠标快速移动到它们上面时，它们中的一些会停留在…藏起来了。我可以退出透明的squares，但我的mouseout事件也不能正确触发。因为我的鼠标离我很远，而我的黑色菜单还在一个正方形的顶部！
因此，淡出粉色方块更多地是为了显示问题。我最困扰的是黑色方块没有消失。
$(document).ready(function() {
$('.square').mouseenter(faceon);
$('#hover_c
浏览 5提问于2018-01-27得票数 2
3回答
jQuery鼠标悬停功能持续闪烁
javascript、jquery、html
我在mouseover功能上遇到了问题，我有一个div，当鼠标悬停在它上面时，它的子div在mouseleave上淡入和淡出。孩子的div显示得很好，但是当你把鼠标移到上面的时候，它就一直在淡入淡出，而且很烦人。
这里有一个难题：和我的jQuery函数也在这里：
jQuery(document).ready(function(){
jQuery(".hover").hide();
jQuery('.grid-block').mouseover(function() {
jQuery(this).children('.hover
浏览 0提问于2013-02-20得票数 0
回答已采纳
5回答
悬停时的JQuery显示分区
jquery
我正在尝试弄清楚，当用户将鼠标悬停在内容块上时，如何使用JQuery显示一些工具。例如，在最初隐藏工具的情况下，块按如下方式显示：
<div id="block_1">
<div class="tools" style="display:none;">Tools Here</div>
</div>
<div id="block_2">
<div class="tools" style="display:none;"&
浏览 3提问于2010-11-02得票数 8
回答已采纳
4回答
我有两个彼此靠近的divs。当我将鼠标悬停在div 1上时，显示的是div 2。
如果我不将鼠标悬停在div 2上，它应该会淡出。或者，如果我将鼠标从div one移动到其他地方，那么div two也应该会淡出。
$(".one").mouseover(function () {
$(".two").show();
});
$(".two").mouseleave(function () {
$(".two").fadeOut(1);
});
浏览 0提问于2015-05-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
