In twitter, when you hover your mouse over a message a star and a reply icon appears on the right.
在Twitter中,当您将鼠标悬停在消息上时,右侧会出现一个星形和一个回复图标。
Similarly, in facebook when you hover your mouse over to an update, the little 'hide' icon appears on the right also giving a little context menu.
同样,在Facebook中将鼠标悬停在更新时,右侧会显示一个小“隐藏”图标,同时提供一个上下文菜单。
I want to have a similar approach in my project for drag & drop handles. What I can decide is the what the most efficient way is it to accomplish this goal.
我希望在我的拖放句柄项目中有类似的方法。我能决定的是实现这一目标最有效的方法。
is it that everytime I hover the mouse onto a div with an id, do I just inject the html with .append() or similar? or do I show/hide the already existing html.. or is there a better way?
是不是每次我将鼠标悬停在带有id的div上时,我只是用.append()或类似的方式注入html?或者我是否显示/隐藏已存在的html ..还是有更好的方法?
3 个解决方案
#1
The speediest solution would be to have a hidden block with the button/drag handle and whenever you mouse-over your element you .show() that div and position it accordingly (with css)
最快的解决方案是使用按钮/拖动手柄设置一个隐藏块,每当你鼠标悬停在你的元素上时,你.show()会相应地对它进行div和定位(用css)
.append()'ing and removing html code on each mouse-over is certainly possible but will most definitely have some performance hit.
.append()在每个鼠标悬停时删除和删除HTML代码肯定是可能的,但肯定会有一些性能损失。
#2
Having done something like this recently, here is an extended example, if you want to test it you will need to grab jquery, jquery ui and my reset.css. See the linked screenshot here. On hover, the background and border are changed and the previously hidden icons are shown.
最近做过这样的事情,这是一个扩展的例子,如果你想测试它,你需要抓住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>
#3
There's a better way if you want to display nice tooltips - the tooltip plugin
如果你想显示漂亮的工具提示 - 工具提示插件,有一种更好的方法
You could always append content to the DOM and then remove on hover out, that does work. I think it depends on what you're planning on displaying, if it's images then I'd be tempted to hide them on page load and then show on hover but if it's just a block of text then I'd probably be tempted in appending to the DOM and then removing on hover out.
您可以随时将内容附加到DOM,然后在悬停时删除,这确实有效。我认为这取决于你计划展示的内容,如果它是图像,那么我会想要在页面加载时隐藏它们然后在悬停时显示但是如果它只是一个文本块那么我可能会被诱惑添加到DOM,然后在悬停时删除。
Another aspect to consider is graceful degradation - would you want some/similar functionality to be available if JavaScript is disabled or none?
要考虑的另一个方面是优雅降级 - 如果JavaScript被禁用或没有,您是否希望某些/类似功能可用?
If you inspect Facebook with Firefox's Firebug plugin, you can see that the hide div is there when the page is loaded, but is hidden and activated through CSS classes.
如果您使用Firefox的Firebug插件检查Facebook,您可以看到加载页面时隐藏div是存在的,但是通过CSS类隐藏和激活。
#1
The speediest solution would be to have a hidden block with the button/drag handle and whenever you mouse-over your element you .show() that div and position it accordingly (with css)
最快的解决方案是使用按钮/拖动手柄设置一个隐藏块,每当你鼠标悬停在你的元素上时,你.show()会相应地对它进行div和定位(用css)
.append()'ing and removing html code on each mouse-over is certainly possible but will most definitely have some performance hit.
.append()在每个鼠标悬停时删除和删除HTML代码肯定是可能的,但肯定会有一些性能损失。
#2
Having done something like this recently, here is an extended example, if you want to test it you will need to grab jquery, jquery ui and my reset.css. See the linked screenshot here. On hover, the background and border are changed and the previously hidden icons are shown.
最近做过这样的事情,这是一个扩展的例子,如果你想测试它,你需要抓住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>
#3
There's a better way if you want to display nice tooltips - the tooltip plugin
如果你想显示漂亮的工具提示 - 工具提示插件,有一种更好的方法
You could always append content to the DOM and then remove on hover out, that does work. I think it depends on what you're planning on displaying, if it's images then I'd be tempted to hide them on page load and then show on hover but if it's just a block of text then I'd probably be tempted in appending to the DOM and then removing on hover out.
您可以随时将内容附加到DOM,然后在悬停时删除,这确实有效。我认为这取决于你计划展示的内容,如果它是图像,那么我会想要在页面加载时隐藏它们然后在悬停时显示但是如果它只是一个文本块那么我可能会被诱惑添加到DOM,然后在悬停时删除。
Another aspect to consider is graceful degradation - would you want some/similar functionality to be available if JavaScript is disabled or none?
要考虑的另一个方面是优雅降级 - 如果JavaScript被禁用或没有,您是否希望某些/类似功能可用?
If you inspect Facebook with Firefox's Firebug plugin, you can see that the hide div is there when the page is loaded, but is hidden and activated through CSS classes.
如果您使用Firefox的Firebug插件检查Facebook,您可以看到加载页面时隐藏div是存在的,但是通过CSS类隐藏和激活。