如何創建鼠標懸停或懸停，這將觸發一個與三個鏈接的div彈出？

Question

如何創建一個鼠標懸停或懸停，這將觸發一個彈出與三個鏈接的股利？

看到圖像：http://postimg.org/image/d8lhmhoh7/

鏈接有「登錄」，當用戶將鼠標懸停在矩形彈出框將與三通或圖像的鏈接出現。當用戶將鼠標移出時彈出消失。

Answer 1

您只能在CSS中實現它。執行以下操作： 創建嵌套的div，隱藏裏面的div（顯示：無），這個應該包含三個鏈接。 然後在CSS中使用：hover僞選擇器，並在用戶鼠標懸停您的父div時，通過將顯示設置爲阻止（display：block）來使隱藏div可見。

這是非常高的水平，這看起來類似於創建下拉菜單，所以可能你可以閱讀有關如何做到這一點。

Answer 2

我最近做了這個使用純CSS，並增加了一個腳本來確保iOS的兼容性。

This question以某種方式解決了這個問題，我最終將自己的流程放在了基礎上，儘管我最終在類中使用了類而不是id，但它的工作原理也一樣。

.container > div { 
    display: none 
} 
.container > div:first-child { 
    display: block 
} 
.container:hover > div { 
    display: block 
} 

對於iOS的兼容性，我用這個：

<script type='text/javascript'> 

$(document).ready(function(){ 

// iOS Hover Event Class Fix 
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { 
$(".hoverclasshere div").click(function(){ 
// Update class to point at the head of the list 
}); 

} 

}); 

</script> 

如果你是不是已經在您的網站使用jQuery，你就必須確保使用該腳本之前將其列入。

Answer 3

- 試試這個

.tools-Tips 
    { 
display:none; 
height: 20px; 
padding: 10px; 
position: fixed; 
background-color: #F2F2F2; 
left: 70px; 
font-family: arial, Helvetica, sans-serif; 
font-size: 14px; 
color: #003366; 
border-radius: 9px 9px 9px 9px; 
font-weight: bold; 
box-shadow: 0 5px 11px -2px #6F9FAB; 
width:auto; 
    } 

    <div id="myElement" >mouse here</div> 
    <div id='toolsTips' class='tools-Tips'></div> 

<script type="text/javascript"> 

$('#myElement').mousemove(function (e) { 
    var ht = '<div><a href="#">links</a>write what you want<div>'; 
    $('#toolsTips').html(ht).show().css({ 'top': (e.clientY + 'px'), 'left': ((e.clientX + 20) + 'px') }); 

}).mouseleave(function() { 
    $('#toolsTips').hide(); 
}); 

</script>