Question

所以我试图找出如何使用emoji css文件（https://afeld.github.io/emoji-css/）使用的元素是不可见的，直到它附加的A元素也悬停在上面。所以我想要这个：

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

当锚标记悬停在上面时，我希望只显示头骨表情符号。

Answer 1

尝试visibility属性：

i {
    visibility: hidden;
}

i:hover {
    visibility: visible;
}

Answer 2

首先应该对元素设置不可见，有一个名为visibility的属性：

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

Answer 3

试试这个：

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

Answer 4

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

尝试这个CSS它应该是工作

Answer 5

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>

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

5 个答案: