懸停在錨點上時出現的CSS div;讓它在懸停在div上時可見

Question

我有一個div，當我將鼠標懸停在它之前的鏈接上時，我想彈出它。懸停效果很好，但div內有一個鏈接，表示我希望人們可以點擊，但當我嘗試去點擊時它會消失。

這裏是jsfiddle

我想在這裏只使用CSS，但如果我需要任何的jQuery或任何然後冷卻。

#soldoutinfo a {           
    padding:4px 2px; 
    font-size:10px; 
} 

#soldoutinfo, .soldout {           
    display:inline; 
} 

#soldoutinfo a {          
    color:#cc0000; 
} 

#soldoutinfo a:visited {        
    color:#cc0000; 
} 

#soldoutinfo + div {          
    display:none; 
    width:0; 
    height:0; 
    position:absolute; 
} 

#soldoutinfo:hover + div {       
    display:block; 
    height:60px; 
    width:250px; 
    background:#ffffff; 
    box-shadow: 0 0 4px #888888; 
    position: absolute; 
    padding: 8px; 
    top: 19px; 
    left:12px; 
    z-index:1000; 
} 

#soldoutinfo + div p {       
    font-size:12px; 
} 

<p id="soldoutinfo"> 
    <sup><a>?</a></sup> 
</p> 
<div> 
<p>Hope is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to you. 
</p> 
</div> 

Answer 1

的問題是，懸停效果是錨後的元素。所以當你離開錨點時，你的懸停效果將會結束。

你可以解決它這個樣子，雖然它不是最乾淨的解決方案： 設置你的錨內的提示，使用span

<p id="soldoutinfo"> 
    <sup><a>?</a></sup> 
    <span>Hope is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to you.</span> 
</p> 

#soldoutinfo span {         
    display:none; 
    width:0; 
    height:0; 
    position:absolute; 
} 

#soldoutinfo:hover span {       
    display:block; 
    height:60px; 
    width:250px; 
    background:#ffffff; 
    box-shadow: 0 0 4px #888888; 
    position: absolute; 
    padding: 8px; 
    top: 19px; 
    left:12px; 
    z-index:1000; 
} 

JSFiddle DEMO

Answer 2

這裏一個進場點：

當你懸停?

$("#id").hover(function(){ 
    $(this).find("#toShow").show(); 
} 

和他離開時#toShow

$('#toShow').mouseout(function() { 
    $('#toShow').hide(); 
}); 

Answer 3

我看到在這個小提琴我沒有JS代碼不知道爲什麼。但解決方案是在這個函數中使用setTimeout();，你可以指定在隱藏盒子後的哪段時間。您也可以添加hide() param'slow'。

您也可以使用現成的解決方案，是Jquery UI ToolTip

Answer 4

編輯你的小提琴： http://jsfiddle.net/s8QWY/6/

看看這是否適合你。基本上我做的是這樣的：

1. 讓隱藏的div在你必須懸停的div中才能顯示出來。
2. 使父div的位置相對

3. 使顯示的div的位置位於懸停元素的位置，以便當您將鼠標懸停在div上時仍然顯示div。 ？

   <div id="soldoutinfo"><sup><a>?</a><div><p>Hope is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to you.</p></div></sup></div> 
   
   
   #soldoutinfo a {           
       padding:4px 2px; 
       font-size:10px; 
   } 
   
   #soldoutinfo, .soldout {           
       display:inline; 
       position: relative; 
   } 
   
   #soldoutinfo a {          
       color:#cc0000; 
   } 
   
   #soldoutinfo a:visited {        
       color:#cc0000; 
   } 
   
   #soldoutinfo div {         
       display:none; 
       width:0; 
       height:0; 
       position:absolute; 
   } 
   
   #soldoutinfo:hover div, 
   #soldoutinfo div:hover {        
       display:block; 
       height:60px; 
       width:250px; 
       background:#ffffff; 
       box-shadow: 0 0 4px #888888; 
       position: absolute; 
       padding: 8px; 
       top: 3px; 
       left:3px; 
       z-index:1000; 
   } 
   
   #soldoutinfo + div p {       
       font-size:12px; 
   }