当只用JS盘旋时，如何在我的网站上显示一个元素？

Question

编辑：

嗨，我想知道如果用户将鼠标悬停在收件箱上，我怎么能显示一点X或删除图标

我首先尝试隐藏删除图标，然后将此效果添加到<p>元素:hover {display:block;}，我不知道我做错了什么但它没有工作< / p>

http://jsbin.com/zijewohoru/1/edit?html,css,output

无论如何我可以用JS做到这一点，或者用CSS做它会容易得多吗？

Answer 1

我认为这就是你要找的东西。

/* Hide icon by default */
.box i {
  display: none;
}

/* Show icon on containing element hover */
.box:hover i {
  display: block;
}

对于淡入过渡，这可行。

.box i {
  opacity: 0;
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
}

.box:hover i {
  opacity: 1;
}

Answer 2

添加此

＆＃13;

＆＃13;

.box:hover > i {
  display: block;
}
.box > i {
  display: none;
}

＆＃13;

＆＃13;

＆＃13;