title: Hide icon on hover in css?
body: <p>I have a piece of html which looks like this</p>
  
  <pre><code>&lt;div&gt;
      &lt;i onclick="delete()" class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;object style="height:100%; width:100%;" data="https://example.com/static/img/4510119851.svg" type="image/svg+xml"&gt;&lt;/object&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here I have an svg image which I show in <code>object</code> tag and a <code>cross</code> icon. Now I want the icon to only show up when I hover on the image.</p>
  
  <p>I tried changing the <code>css</code> like this</p>
  
  <pre><code>object i {
          display: none;
  }
  
  object:hover i {
          display: block;
  }
  </code></pre>
  
  <p>But it doesn't work. What am I doing wrong?</p>