title: Displaying a "close" icon upon hover
body: <p>I have a newsfeed which is obviously organized by an . When the user hovers over each of the items, the background is highlighted. I'd also like to have a small "x" in the top right hand corner of each item, only shown when hovered. This "x" would be a delete button to remove that post.</p>
  
  <p>Right now I just have some basic html stating: <code>&lt;div class="hide-button"&gt;&lt;a href="#"&gt;x&lt;/a&gt;&lt;/div&gt;</code></p>
  
  <p>I know that I don't want the "x" displayed in the html, but rather have it in the CSS. So I have the <code>&lt;li&gt;</code> css below for hovering, as well as the CSS for the hide button. I'd like to know the best method to integrate the hide button div into the <code>&lt;li&gt;</code></p>
  
  <pre><code>.hide-button {
      float: right;
      margin-top: -13px;
      font-size: 11px;
      font-family: helvetica;
      color: gray;
  }
  
  .hide-button a{
      text-decoration: none;
      color:gray;
  }
  
  .hide-button a:hover {
      text-decoration: underline;
      color:gray;
  }
  </code></pre>
  
  <p>and the list:</p>
  
  <pre><code>.newsfeedlist li {
      background: white;
      border-bottom: 1px solid #E4E4E4;
      padding: 12px 0px 12px 0px;
      overflow: hidden;
  }
  
  .newsfeedlist li:hover {
      background-color: #F3F3F3;
  }
  </code></pre>
  
  <p>Thank you so much!!!!!</p>