作者热门文章
- html - 我的下拉菜单的内容关闭得太快
- c# - 使用 Html Agility Pack 从网页中的表中获取值而不使用 "SelectNode'
- html - 内容容器下的 CSS 下拉菜单
- html - 如何停止嵌套列表重叠父列表?
这是我想要解决的问题:
这是我希望创建的功能,我认为它可以解决问题:
当然,我知道当您将鼠标悬停在元素上时显示一些图标或其他内容非常容易。问题是,当你鼠标移开时,图标会消失。该问题的解决方案是将元素包装在某个可视容器中,只要用户位于该容器内,图标就会保留。我希望有人已经编写了一个 jQuery 插件或类似的符合要求的东西。当然,我愿意接受其他完全不同的解决方案。
这是我想要做的事情的直观示例。页面上有一些链接,当您将鼠标悬停在其上时,它会被“包裹”在一个按钮中,旁边有一些图标。
最佳答案
这确实不是一个问题。但是,您可以将 anchor 包裹在 div 中并使用负边距来防止文本移动。
HTML
Here is some text and <div class="fancy"><a href="#" >some link</a></div>.
CSS
.fancy {
line-height:160%;
display:inline-block;
position:relative;
}
.fancy:hover {
background: #CCC;
border-radius:4px;
padding:0 10px;
margin:0 -10px;
}
然后使用一点 jQuery,您可以在鼠标悬停时追加并在鼠标移出时删除。
JavaScript (jQuery)
$( ".fancy" ).mouseover(function() {
$( this ).append( "<span class=\"something\"> ®©</span>" );
}).mouseout(function() {
$( this ).find( ".something" ).remove();
});
可能有很多不同的方法来完成您的需求,但这似乎可能是一种解决方案。
关于javascript - 当用户将鼠标悬停在链接上时想要显示图标/选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29597492/
我是一名优秀的程序员,十分优秀!