通過鏈接浮動圖標不會收到鼠標單擊事件

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