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

Question

以下是我要解决的问题：

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

这是我想要创建的功能，我认为可以解决问题：

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

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

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

Answer 1

这真的不是问题。但是，您可以将锚包装在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，您可以在mouseover上追加并在mouseout上删除。

JavaScript（jQuery）

$( ".fancy" ).mouseover(function() {
  $( this ).append( "<span class=\"something\"> &reg;&copy;</span>" );
}).mouseout(function() {
  $( this ).find( ".something" ).remove();
});

可能有很多不同的方法可以满足您的需求，但这似乎可以解决这个问题。

See example in JSFiddle