如何使<i>元素隱藏，直到使用CSS懸停爲止？

-2

因此，我試圖弄清楚如何使一個我正在使用的表情符號文件（https://afeld.github.io/emoji-css/）中的元素不可見，直到它所連接的A元素也被隱藏起來。所以，我想這一點：如何使<i>元素隱藏，直到使用CSS懸停爲止？

<p><a href="#"><i class="em em-skull"> SKULL EMOJI</i></a></p>

而且我想頭骨的表情符號，只顯示了，當錨標記上空盤旋。

來源

2017-07-25 600Jasper

'.EM人頭骨{不透明度：0}：懸停.EM人頭骨{不透明度：1}' –

嘗試visibility屬性：

i { 
    visibility: hidden; 
} 

i:hover { 
    visibility: visible; 
}

來源

2017-07-25 05:45:18 fen1x

你應該設置爲不可見的元素首先，有一個屬性叫做知名度：

a { 
    visibility: hidden; 
}

然後表現出來：

a:hover { 
    visibility: visible; 
}

有是更多類型的事件檢測器，這些被稱爲僞類，如：

/* unvisited link */ 
a:link { 
    color: #FF0000; 
} 

/* visited link */ 
a:visited { 
    color: #00FF00; 
} 

/* mouse over link */ 
a:hover { 
    color: #FF00FF; 
} 

/* selected link */ 
a:active { 
    color: #0000FF; 
}

來源

2017-07-25 05:46:35 Michael

試試這個：

HTML

<p><a href="#" class="showafterhover"><i class="em em-skull"></i>SKULL EMOJI</a></p>

CSS

.showafterhover>i{visibility: hidden;} 
.showafterhover:hover>i{visibility: visible;}

來源

2017-07-25 05:48:00

 a i { display: none; } a:hover i { display: block; }

試試這個CSS應該是工作

來源

2017-07-25 05:51:49 TVM

總是試圖elobrate您回答 –

這不行！爲什麼？因爲'display：none'會刪除元素和完整的空間，所以沒有區域可以再懸停。另一方面，「可見性：隱藏」只隱藏元素，但仍佔用空間，因此可以將其懸停。 –

a .em { 
 
    display: none; 
 
} 
 

 
a:hover .em { 
 
    display: inline-block; 
 
}

<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" /> 
 
<p><a href=#><i class="em em-skull"></i>SKULL EMOJI</a></p>

來源

2017-07-25 05:55:02 Gerard

如何使<i>元素隱藏，直到使用CSS懸停爲止？

回答

相關問題