如何使<i>元素隐藏，直到使用CSS悬停为止？

问题描述：

因此，我试图弄清楚如何使一个我正在使用的表情符号文件（https://afeld.github.io/emoji-css/）中的元素不可见，直到它所连接的A元素也被隐藏起来。所以，我想这一点：如何使<i>元素隐藏，直到使用CSS悬停为止？

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

而且我想头骨的表情符号，只显示了，当锚标记上空盘旋。

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

答

尝试visibility属性：

i { 
    visibility: hidden; 
} 

i:hover { 
    visibility: visible; 
}

答

你应该设置为不可见的元素首先，有一个属性叫做知名度：

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; 
}

答

试试这个：

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;}

答

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

试试这个CSS应该是工作

总是试图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>

如何使元素隐藏，直到使用CSS悬停为止？

相关推荐