CSS - 翻轉一個元素，並使另一個元素可見

在CSS中，當我翻轉一個元素時，可能會使另一個元素可見？我有一個圖標，當有人將鼠標懸停在它上面時，我希望它使可見的文本元素能夠描述圖標的功能。CSS - 翻轉一個元素，並使另一個元素可見

2010-05-05 Kyle

下面是我一直使用的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>

希望它有幫助。

來源

2010-05-06 06:42:06 Kyle

這裏是小提琴http://jsfiddle.net/c0owz9qb/ – suhailvs 2015-03-30 09:46:35

當然是！

.me:hover span { display: block; }

如果你想表明並不是元素的孩子徘徊，你可能需要使用JavaScript

來源

2010-05-05 19:23:01 hunter

與JavaScript的建議，同意的元素。具體來說，jQuery很容易，並且最適合頁面行爲邏輯。我認爲CSS應該只是看/感覺/風格...... Javascript應該是你所有的事件和行爲邏輯。

來源

2010-05-05 19:25:31

你可以讓孩子元素可見通過懸停在父（爲Hunter suggests），或兄弟姐妹：

span:hover + span {display: block; }

有可能一些輕微的跨瀏覽器的兼容性問題，但有一個有效的doctype我想IE7 +與兄弟選擇器無關（儘管我沒有試圖測試這個理論）。

來源

2010-05-05 19:26:02

這裏有一個小耳光在一起的例子，將無法在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。

來源

2010-05-05 19:36:09

CSS - 翻轉一個元素，並使另一個元素可見

回答

相關問題