仅用JS悬停时，如何在网站上显示元素？

Question

EDIT:

Hi, I would like to know how could I show a little X or remove icon when a user hovers over the inbox

I tried to hide the remove icon first and then add this effect to a <p> element :hover {display:block;} ,I don't know what I did wrong but it didn't work

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

Is there anyway I could do it with JS or would it be a lot easier to do it with CSS?

Answer 1

I think something like this is what you are looking for.

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

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

For a fade-in transition, this would work.

.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

Add this

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