I am using a hover library to create an animation when the user hovers over a `<li>`

Here's a sample:

```
<ul id="da-thumbs" class="da-thumbs">
        <li>
            <a href="#">
                <img src="http://placehold.it/350x150" />
                <div>
                    <span>My Muse by Zachary Horst</span>
                </div>
            </a>
        </li>
...
</ul>

```

Here's the working fiddle - <http://jsfiddle.net/95Lsafhe/>

All is well up till here.

However as soon as I add an anchor below the `<span>`, everything goes for a toss.

```
<ul id="da-thumbs" class="da-thumbs">
        <li>
            <a href="#">
                <img src="http://placehold.it/350x150" />
                <div>
                    <span>My Muse by Zachary Horst</span>
                     <a href="#" class="btn btn-default">Add button</a>
                </div>
            </a>
        </li>
...
</ul>

```

<http://jsfiddle.net/95Lsafhe/1/>

I am not sure what is breaking the functionality? I just want to display anchor buttons below the span when the use hovers on a `<li>`.

**Update:** From the comments, I have learned that an anchor cannot be nested within another. I want an anchor directly below the span. However I am **OK** if the outer anchor is deleted/removed. Can you tell me how to change my css/code to make this happen. The span and button have to visible only on hover.