show a div inside a div only if it is :hover?

Question

I have a div with an image and a small favorites button over it that people can click, but I'd like it to show only if they :hover over the div. How would I do that?

The structure is like this:

<a href="">
  <li class="mainpage">
    <article class="item mainpage">
      <div class="image">
        <div class="favorites-button" style="display: none;"><span class="icon-fav"></span></div>
      </div>
    </article>
  </li>
</a>

So basically, when somebody does a :hover on <article class="item mainpage"> then the <div class="favorites-button"> should show.

Answer 1

Here is a pure CSS solution. Firstly you want to remove the style attribute from your favourites button as this will override any CSS applied.

<a href="">
    <li class="mainpage">
        <article class="item mainpage">
            <div class="image">
                <div class="favorites-button"><span class="icon-fav"></span></div>
            </div>
        </article>
    </li>
</a>

Then in your CSS by default hide the favourites button but display it when it is the child of a hovered parent element like so...

.favourites-button {
    display: none;
}

.item.mainpage:hover .favourites-button {
    display: block;
}

Hope that helps Dan