javascript - 链接上的 float 图标不接收鼠标单击事件

Question

当鼠标悬停在链接上时，我想在链接的右侧显示一个 float 图标。这个想法是能够点击图标来显示一个对话框。只要图标下方没有链接文本，此方法就有效。如果文本太长以至于图标覆盖在文本上，则执行链接。永远不会调用图标点击处理程序。

如何使图标优先于链接？这是一个问题，因为图标是 float 的吗？

+------------------------------------------------------+
| This is the link                                |ICON|
+------------------------------------------------------+

HTML 看起来像这样:

<div class="group-content ui-sortable">
    <a title="GMail|http://mail.google.com/mail" class="link show-option " 
            href="http://mail.google.com/mail" target="GOOGLE">
        <span title="link.openSettings" class="ui-icon ui-icon-gear link-settings" 
            style="display: none; z-index: 9999;"></span>
        <span class="ui-icon link-icon ui-icon-link ui-sortable-handle"></span>
        GMail
    </a>
    ... more links ...
</div>

CSS:

.link-settings {
    padding: 2px;
    background-color:rgba(255, 255, 255, 0.2);
    float: right;
    z-index: 9999;   /** bring to the top ... */
}

JavaScript:(在页面初始化时调用。在所有链接上添加一个弹出图标)

$('.link')
    .prepend("<span class='ui-icon ui-icon-gear link-settings'></span>")
    .hover(
        function () {
            $(this).find(".link-settings")
                .show()
                .css('z-index', '9999');
        },
        function () { $(this).find(".link-settings").hide(); }
    )
    .click(function () {
        console.log("Link clicked");
    })
;

Answer 1

跨度在链接的内部..所以链接当然有效..你仍然在点击它。

您需要将跨度放在链接的外部并位于链接的顶部。

我不知道你有完整的 HTML 和 CSS，但基本上你需要包装链接并跨越这样的东西:

* {
  box-sizing: border-box;
}
.wrap {
  display: inline-block;
  border: 2px solid green;
  position: relative;
}
a {
  display: block;
  background: plum;
  text-decoration: none;
  font-weight: bold;
  padding: .25em;
  color: red;
}
.link-settings {
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  background: grey;
  color: white;
  font-weight: bold;
  padding: .25em;
  display: none;
}
.wrap:hover .link-settings {
  display: block;
}

<div class="wrap">
  <a href="#">Lorem ipsum dolor sit amet.</a>
  <span class="link-settings">Icon</span>
</<div>