Question

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

Answer 1

span类将float:left应用于它应用的元素。在您的情况下，由于span内部有li，li没有高度 - 它充满了浮动元素。

当涉及到javascript的事件冒泡时，我不是一个高手，但我假设它正在工作的原因是只有当你翻过span-22时事件才会冒泡，第二个你离开它，因为li没有高度，你将永远无法滚动到你的删除。

长话短说，您可以为li提供一个高度，或者将蓝图.clearfix类应用于所有li。

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

希望这有帮助。

鼠标悬停和隐藏一些元素的问题

1 个答案: