1

我正在尝试使用 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>
4

1 回答 1

2

该类span将 a 应用于float:left它所应用的元素。在你的情况下，因为你有你的span内部li，所以li没有高度——它充满了浮动元素。

当谈到 javascript 的事件冒泡时，我不是一个高手，但我假设它完全起作用的原因是事件只有在你滚动时才会冒泡span-22，而你下车的第二个它，因为li没有高度，你将永远无法滚动到你的删除。

长话短说，您可以给您的高度li或将蓝图.clearfix类应用于所有lis.

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

希望这可以帮助。

于 2009-09-02T06:38:28.390 回答