javascript - 当只用 JS 悬停时，如何在我的网站上显示一个元素？

Question

编辑:

你好，我想知道如何在用户将鼠标悬停在收件箱上时显示一个小 X 或删除图标

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

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