CSS懸停div鏈接

Question

我正在使用以下css創建一個彈出式菜單，其中包含用戶懸停在特定鏈接上的信息。如何修改後續代碼，以便用戶可以點擊跨度內的鏈接？截至目前第二個鼠標離開原始鏈接，div消失。

a:hover { 
position: relative; 
} 

a span { 
display: none; 
} 

a:hover span { 
color:#006699; 
display: block; 
position: absolute; 
width:190px; 
height:12px; 
top: -15px; 
left: 30px; 
padding: 5px; 
z-index: 100; 
} 

<a href=email.php>email<span>text</span></a> 

Answer 1

也就是說不你必須有有效的HTML - 塊級p標籤不能包含在內嵌a和span標籤。即使你使用HTML5，它改變了有關哪些元素可以在其中的其他元素的規則，你仍然不能在錨內錨定- 它只是沒有意義。

您可以做的是使用adjacent sibling selectors來完成這項工作，方法是讓彈出式元素顯示在文檔標記中的錨點旁邊，而不是在其內部。

但是，建議您使用JavaScript來控制網站的行爲元素 - JavaScript還可以更好地控制彈出窗口的行爲方式，並且通常更適合於此。