鼠标悬停和隐藏某些元素的问题
我正在尝试使用 jquery 和 blueprint css 来完成一个（所以我认为）简单的任务，如下面的代码所示。基本上，我有一个项目列表，我想在每个项目的末尾有一个 X，以便可以删除这些项目，我还希望仅当用户将鼠标悬停在列表项目上时才出现 X。鼠标悬停部分可以正常工作，但是当我靠近 X 进行单击时，它由于某种原因消失了。 Blueprint 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>
I'm trying to use jquery and blueprint css to do a (so i thought) simple task, which is illustrated in the code below. Basically, I have a list of items, and I want to have a X at the end of each item so that the items can be deleted, i would also want the X appearing only if the user mouseover the list items. The mouseover part works somewhat, but when i go near the X to click, it disappears for some reason. Blueprint css is used for positing. The code is as follows, it should just work if plugged into a blank html file:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
span类将float:left应用于其所应用的元素。在您的例子中，由于li内部有span，因此li没有高度 - 它充满了浮动元素。当谈到 javascript 的事件冒泡时，我不是一个高手，但我假设它起作用的原因是，只有当您滚动
span-22，一旦你离开它，由于li没有高度，你将永远无法滚动到你的删除。长话短说，您可以为
li指定高度，或者将蓝图.clearfix类应用于所有li。编辑：可能还有其他方法可以解决此问题，但这些是首先想到的。
希望这有帮助。
The
spanclass applies afloat:leftto the element it's applied to. In your case, since you have thespaninside of yourli, thelihas no height—it's filled with floating elements.I'm not a whiz when it comes to the event bubbling of javascript, but I'm assuming the reason that it's working at all is that the event is bubbling up only when you are rolling over the
span-22, and the second you get off of it, since thelihas no height, you won't ever be able to roll on to your delete.Long story short, you could either give a height to your
lior apply the blueprint.clearfixclass to all of thelis.EDIT: There are probably other ways to fix this, but these are the first that come to mind.
Hope this helps.