javascript - 当用户将鼠标悬停在链接上时想要显示图标/选项

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 8 年前。

Improve this question

这是我想要解决的问题:

• 我的页面上有许多元素，例如文本 block 中的链接，我希望用户能够轻松访问上下文操作
• 我不想依赖右键单击上下文菜单，因为它是不透明的 - 用户不会知道他们可以右键单击，除非他们被教导这样做
• 悬停菜单会更好，因为用户可能会将鼠标悬停在这些元素上以用于其他目的

这是我希望创建的功能，我认为它可以解决问题:

• 能够标记页面上的元素，以便当用户将鼠标悬停在这些元素上时，该元素将被包装在容器中，旁边带有一些图标或链接
• 元素必须保持在屏幕上完全相同的位置(即文本不移动)
• 目标元素可以是内联元素，也可以是 block 元素

当然，我知道当您将鼠标悬停在元素上时显示一些图标或其他内容非常容易。问题是，当你鼠标移开时，图标会消失。该问题的解决方案是将元素包装在某个可视容器中，只要用户位于该容器内，图标就会保留。我希望有人已经编写了一个 jQuery 插件或类似的符合要求的东西。当然，我愿意接受其他完全不同的解决方案。

这是我想要做的事情的直观示例。页面上有一些链接，当您将鼠标悬停在其上时，它会被“包裹”在一个按钮中，旁边有一些图标。

Answer 1

这确实不是一个问题。但是，您可以将 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\"> &reg;&copy;</span>" );
}).mouseout(function() {
  $( this ).find( ".something" ).remove();
});

可能有很多不同的方法来完成您的需求，但这似乎可能是一种解决方案。

See example in JSFiddle .