Question

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

如何通过链接优先显示图标？这是一个问题，因为图标是浮动的吗？

+------------------------------------------------------+
| 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＆amp;你有CSS，但基本上你需要包装链接并跨越这样的东西：

＆＃13;
＆＃13;
* { 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; }
＆＃13;
<div class="wrap"> <a href="#">Lorem ipsum dolor sit amet.</a> <span class="link-settings">Icon</span> </<div>
＆＃13;
＆＃13;
＆＃13;

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

1 个答案: