我有一个菜单,其中包含使用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(显示在页面的右上角,或者在menuList旁边),直到所有<a>
标记都悬停之前,它都没有任何内容,并显示其响应两个属性,直到不再将鼠标悬停为止。
代码没有错误。但是当鼠标悬停在列表上时,我看不到红色的任何内容。是否有可能实现我的期望?
答案 0 :(得分:1)
您可以使用mouseout
事件在离开列表元素时用hide
隐藏toshow
div。并且在每个hover
事件中,您可以将toshow
的html更改为用户将鼠标悬停在li
元素上的值,并使用show
进行显示。 / p>
还要确保在插入动态生成的列表的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>