鼠标悬停时显示图标(或内容)
鼠标悬停时显示图标(或内容)
提问于 2009-05-14 21:30:01
在twitter中，当你将鼠标悬停在一条消息上时，右边会出现一个星号和一个回复图标。
同样，在facebook中，当你将鼠标悬停在更新上时，右侧会出现一个小的“隐藏”图标，同时还会给出一个小的上下文菜单。
我想在我的项目中有一个类似的拖放手柄的方法。我能决定的是，实现这个目标最有效的方法是什么。
是不是每次我将鼠标悬停在带有id的div上时，我只是用.append()或类似的方法注入html？或者显示/隐藏已经存在的html..还是有更好的方法？
回答 2
Stack Overflow用户
发布于 2009-05-14 21:39:52
最快的解决方案是有一个带有按钮/拖动手柄的隐藏块，每当你将鼠标放在你的元素上时，你就会.show()那个div，并相应地定位它(使用css)。
在每次鼠标悬停时.append()'ing和移除html代码当然是可能的，但肯定会对性能造成一些影响。
Stack Overflow用户
发布于 2009-05-14 23:27:18
最近做了这样的事情，这里有一个扩展的例子，如果你想测试它，你需要抓取jquery，jquery ui和我的reset.css。悬停时，背景和边框会更改，并显示以前隐藏的图标。
<html>
<head>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/smoothness/jquery-ui.css" type="text/css" media="screen" />
<style type="text/css">
body {
font-family: sans-serif;
font-size: 13px;
}
p {
font-size: 1em;
line-height: 1.5em;
margin-bottom: 15px;
}
#items .item .buttons {
width: 16px;
display: none;
float: right;
background: transparant;
}
#items .item .buttons li {
height: 16px;
width: 16px;
margin: 1px 1px 0px 0px;
float:right;
cursor: pointer;
}
#items .item {
width: 400px;
margin: 10px;
border: 1px dotted #fff;
}
#items .hover {
background: #ffe;
border: 1px dotted #ccc;
}
#items .item .contents {
margin: 20px 10px 10px 10px;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#items .item').hover(
function() {
$(this).addClass('hover');
$(this).find('.buttons').show();
},
function() {
$(this).removeClass('hover');
$(this).find('.buttons').hide();
}
);
$('#items .item .buttons li').hover(
function() {
$(this).addClass('ui-state-hover');
},
function() {
$(this).removeClass('ui-state-hover');
}
);
});
</script>
<link
</head>
<body>
<div id="items">
<div class="item">
<ul class="buttons">
<li class="delete ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-close"/>
</li>
<li class="config ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-wrench"/>
</li>
<li class="info ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-info"/>
</li>
</ul>
<div class='contents'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet arcu ante. Suspendisse potenti. Praesent vel nisl urna, eu ultricies risus.</p>
<p>Nulla eget mauris ac lectus tempor consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et lacus ipsum.</p>
<p>Donec rhoncus tincidunt magna, sit amet placerat nulla fringilla iaculis.</p>
</div>
</div>
<div class="item">
<ul class="buttons">
<li class="delete ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-close"/>
</li>
<li class="config ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-wrench"/>
</li>
<li class="info ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-info"/>
</li>
</ul>
<div class='contents'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet arcu ante. Suspendisse potenti. Praesent vel nisl urna, eu ultricies risus.</p>
<p>Nulla eget mauris ac lectus tempor consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et lacus ipsum.</p>
<p>Donec rhoncus tincidunt magna, sit amet placerat nulla fringilla iaculis.</p>
</div>
</div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/865891
复制相关文章
相似问题