jquery - UL LI 内的 anchor 破坏了功能

Question

当用户将鼠标悬停在 <li> 上时，我正在使用悬停库创建动画。

这是一个示例:

<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>

这是工作 fiddle - http://jsfiddle.net/95Lsafhe/

到这里一切都很好。

但是，一旦我在 <span> 下面添加一个 anchor ， ，一切都只是折腾。

<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/

我不确定是什么破坏了功能？我只想当使用悬停在 <li> 上时在跨度下方显示 anchor 按钮.

更新:从评论中，我了解到一个 anchor 不能嵌套在另一个 anchor 中。我想要一个直接位于跨度下方的 anchor 。但是，如果外部 anchor 被删除/删除，我确定。你能告诉我如何更改我的 css/代码来实现这一点吗？跨度和按钮必须仅在悬停时可见。

Answer 1

WHat you are doing is wrong you cannot nest html anchor tag It is invalid HTML.

So, by definition, the behaviour is undefined.

Changed Demo

只需将 anchor 标记放在第一个标记下方

<a href="#">
            <img src="http://placehold.it/350x150" />
            <div>
                <span>My Muse by Zachary Horst</span>

            </div>
        </a>
<a href="#" class="btn btn-default AddAnchor">Add button</a>

编辑:-

Work Around you can use span inside the div and emulate the function of anchor tag by firing a click event and inside it use jQuery.get() Method to make HTTP GET Request

Demo with Anchor tag emulated with span