gpt4 book ai didi

jquery - 鼠标悬停和隐藏某些元素的问题

转载 作者:行者123 更新时间:2023-11-28 13:51:54 25 4
gpt4 key购买 nike

我正在尝试使用 jquery 和 blueprint css 来完成一项(我认为)简单的任务,如下面的代码所示。基本上,我有一个元素列表,我想在每个元素的末尾都有一个 X,以便可以删除这些元素,我还希望只有当用户将鼠标悬停在列表元素上时才会出现 X。鼠标悬停部分有些作用,但是当我靠近 X 进行单击时,它由于某种原因消失了。蓝图css用于定位。代码如下,如果插入一个空白的 html 文件,它应该可以正常工作:

<head>
<style type="text/css">
.delete{
display:none;
}
.entry{
list-style:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/63795c8bfe31cbbfad726f714bf8d22770adc7ad/blueprint/screen.css" type="text/css" media="screen, projection">
<script type="text/javascript">
$(function(){
$('.entry').live("mouseover", function(){
$(this).find('.delete').css({'display':'inline'});
}).live('mouseout', function(){
$(this).find('.delete').css({'display':'none'});
});
});
</script>
</head>
<div id="list span-24 last">
<ul>
<li class="entry"><div class="span-22">Something some thing some thing some thing some thing</div><div class="span-2 last"><a class="delete">X</a></div></li>
</ul>
</div>

最佳答案

span 类将 float:left 应用于它所应用的元素。在你的例子中,因为你的 li 中有 span,所以 li 没有高度——它充满了 float 元素。

当涉及到 javascript 的事件冒泡时,我不是专家,但我假设它起作用的原因是只有当你滚动 span 时事件才会冒泡 - 22,当你离开它时,由于 li 没有高度,你将永远无法滚动到你的 delete。

长话短说,您可以为您的 li 指定高度,或者将蓝图 .clearfix 类应用于所有 li .

编辑:可能还有其他方法可以解决此问题,但首先想到的是这些。

希望这对您有所帮助。

关于jquery - 鼠标悬停和隐藏某些元素的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1366063/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com