我有一个菜单,其中包含使用 javascript 动态创建的项目列表。
它们具有使用 setAttribute 创建的不同颜色和国家/地区属性。
$("#menuList a").hover(
function() {
var countryName = $(this).attr('country');
var fruitColour = $(this).attr('colour');
$('#toshow').append($("countryName \n fruitColour"));
},
function() {}
);
.toshow {
display: none;
}
#menuList a:hover div.toshow {
top: 0;
right: 0;
display: block;
position: absolute;
z-index: 99999;
background: red;
width: 200px;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menubar" id="menuList">
<li><a href="#" country="US" colour="green">Watermelon</a></li>
<li><a href="#" country="Australia" colour="green">Grapes</a></li>
<li><a href="#" country="null" colour="null">Strawberry</a></li>
<li><a href="#" country="null" colour="null">Blueberry</a></li>
</ul>
<div class="toshow" id="toshow"></div>
在这里,我想要一个单独的隐藏 div(显示在页面右上角或菜单列表旁边),直到 <a>
中的任何一个都没有任何内容。标签被悬停,并显示其响应的两个属性,直到不再有鼠标悬停。
代码没有错误。但当鼠标悬停在列表上时,我没有看到任何红色的东西。是否有可能实现我想要的目标?
最佳答案
您可以使用mouseout
隐藏 toshow
div 的事件 hide
当您离开列表元素时。并且在每个 hover
事件,您可以将 toshow
的 html 更改为用户悬停在其上的 li
元素的值并使用 show
显示它。
另外,请确保在插入动态生成的列表的 html 之后附加事件处理程序。:
function displayGeneratedList() {
$('#menuList').html(`
<li><a href="#" country="US" colour="green">Watermelon</a></li>
<li><a href="#" country="Australia" colour="green">Grapes</a></li>
<li><a href="#" country="null" colour="null">Strawberry</a></li>
<li><a href="#" country="null" colour="null">Blueberry</a></li>
`);
$("#menuList a").hover(function() {
var countryName = $(this).attr('country');
var fruitColour = $(this).attr('colour');
$('#toshow').html(`${countryName}<br>${fruitColour}`).show();
});
$('#menuList a').mouseout(function() {
$('#toshow').hide();
});
}
$(document).ready(function() {
displayGeneratedList();
});
#menuList {
display: inline-block;
}
.toshow {
display: none;
float: right;
background: maroon;
width: 200px;
height: 100px;
padding: 5px;
color: white
}
<ul class="menubar" id="menuList">
</ul>
<div class="toshow" id="toshow"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
关于javascript - 将鼠标悬停在动态创建的列表上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53572799/