链接上的浮动图标不接收鼠标单击事件

Floating icon over a link does not receive mouse click event

本文关键字：鼠标 单击 事件 图标 链接      更新时间：2023-09-26

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

我怎么做才能使图标优先于链接?这个问题是因为图标是浮动的吗?

+------------------------------------------------------+
| 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");
    })
;

span是在的链接，所以当然链接工作。你还在点击它

你需要把span 放在链接之外，并放在链接的顶部。

我不知道你完整的HTML &你已经准备好了CSS但是你需要对链接进行换行然后span像这样:

* {
  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>

相关文章：