在CSS中,當我翻轉一個元素時,可能會使另一個元素可見?我有一個圖標,當有人將鼠標懸停在它上面時,我希望它使可見的文本元素能夠描述圖標的功能。CSS - 翻轉一個元素,並使另一個元素可見
7
A
回答
15
下面是我一直使用的CSS only tooltip :)作品很棒,即使在IE中也是如此。
a:hover {
background:#ffffff;
text-decoration:none;
}
/*BG color is a must for IE6*/
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
Easy
<a class="tooltip" href="#">
Tooltip
<span>T his is the crazy little Easy Tooltip Text.
</span>
</a>
希望它有幫助。
3
當然是!
.me:hover span { display: block; }
如果你想表明並不是元素的孩子徘徊,你可能需要使用JavaScript
0
與JavaScript的建議,同意的元素。具體來說,jQuery很容易,並且最適合頁面行爲邏輯。我認爲CSS應該只是看/感覺/風格...... Javascript應該是你所有的事件和行爲邏輯。
6
你可以讓孩子元素可見通過懸停在父(爲Hunter suggests),或兄弟姐妹:
span:hover + span {display: block; }
有可能一些輕微的跨瀏覽器的兼容性問題,但有一個有效的doctype我想IE7 +與兄弟選擇器無關(儘管我沒有試圖測試這個理論)。
1
這裏有一個小耳光在一起的例子,將無法在IE瀏覽器...
<html>
<head>
<style>
div.tooltip
{
margin-top: 16px;
margin-left: -1px;
position: absolute;
border: 1px solid black;
background-color: blue;
color: yellow;
display: none;
}
div.icon
{
width: 16px;
height: 16px;
border: 1px solid blue;
background-color: cyan;
}
div.icon:hover .tooltip
{
display: block;
}
</style>
</head>
<body>
<div class="icon">
<div class="tooltip">This is what the icon does.</div>
</div>
</body>
</html>
但你真的應該只使用jQuery。
相關問題
- 1. CSS旋轉,而在另一個元素
- 2. CSS:從一個元素鏈接到另一個元素
- 3. CSS:一個元素
- 4. 在CSS中的另一個元素中定位2個元素
- 5. 使用另一個元素設置一個元素的寬度
- 6. 用另一個元素居中元素?
- 7. 對齊元素到另一個元素
- 8. 元素已經是另一個元素
- 9. 絕對定位一個元素*在另一個元素內
- 10. 將一個div元素放在另一個元素上方
- 11. 「點擊」一個不可見的元素
- 12. 滾動到下一個可見元素
- 13. touchstart上的一個元素,拖動,touchend另一個元素
- 14. CSS - 相對元素隱藏另一個
- 15. 通過懸停另一個元素來更改元素CSS
- 16. 當擴展另一個元素時收起元素只有css
- 17. 如何隱藏元素,如果另一個元素不存在或不可見?
- 18. 如何讓一個元素響應另一個元素的點擊? - CSS/jQuery
- 19. 將一個元素先移動到另一個元素之前用css/html
- 20. 當它懸停另一個元素時更改一個元素的CSS
- 21. 將鼠標懸停在一個元素上,轉換另一個元素
- 22. CSS - 翻轉後在背面可見的元素
- 23. 在一個元素中合併CSS類
- 24. CSS下一個元素
- 25. 水豚,一個css元素
- 26. jQuery:將一個元素綁定到另一個元素
- 27. 用jQuery顯示一個元素相對於另一個元素
- 28. 將屬性從一個元素複製到另一個元素
- 29. 從一個元素到另一個元素的jQuery包裝
- 30. 將一個動態元素的值賦給另一個元素
這裏是小提琴http://jsfiddle.net/c0owz9qb/ – suhailvs 2015-03-30 09:46:35