Hide icon on hover in css?

Question

I have a piece of html which looks like this

<div>
    <i onclick="delete()" class="fa fa-times" aria-hidden="true"></i>
    <object style="height:100%; width:100%;" data="https://example.com/static/img/4510119851.svg" type="image/svg+xml"></object>
</div>

Here I have an svg image which I show in object tag and a cross icon. Now I want the icon to only show up when I hover on the image.

I tried changing the css like this

object i {
        display: none;
}

object:hover i {
        display: block;
}

But it doesn't work. What am I doing wrong?

Answer 1

The i element is a sibling of object, not it's child . You should select it like this :

object ~ i {
        display: none;
}

object:hover ~ i {
        display: block;
}

Updated : Because i is the object 's previous sibling, and for now there is no selector for previous sibling. I suggest to move your i to after object and hack it's positioning with position: absolute.

/*Positioning*/
.icon {
  background: red;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
}

.parent {
  padding-left: 20px;
  position: relative
}

.img {
  background: green;
  width: 80px;
  height: 80px;
}

/*The sibling selector*/

.img:hover ~ .icon {
 display: block;
}
.img ~ .icon {
 display: none;
}

<div class = "parent"> 
  <div class = "img"> Hover Me</div>
  <div class = "icon"> </div>
</div>