文章/答案/技术大牛

发布

社区首页 >问答首页 >鼠标悬停和隐藏某些元素的问题

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

Stack Overflow用户

提问于 2009-09-02 06:11:20

回答 1查看 120关注 0票数 1

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

css

blueprint-css

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2009-09-02 06:38:28

span类将一个float:left应用于它所应用的元素。在本例中，由于li中有span，因此li没有高度-它由浮动元素填充。

当谈到javascript的事件冒泡时，我不是一个高手，但我假设它起作用的原因是只有当你在span-22上滚动时事件才会冒泡，当你离开它的那一秒，因为li没有高度，你永远不能滚动到你的删除。

长话短说，您既可以为li指定高度，也可以将blueprint .clearfix类应用于所有li。

编辑:可能还有其他方法来解决这个问题，但这些是第一个想到的。

希望这能有所帮助。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/1366063

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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