UL LI中的锚破坏了功能

Question

我使用悬停库创建一个动画时，用户悬停在一个

以下是一个示例：

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

这是工作小提琴-http://jsfiddle.net/95Lsafhe/

到这里为止一切都很好。

但是只要我在

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

我不确定是什么破坏了功能？我只想在use悬停在

更新：从评论中，我了解到锚不能嵌套在另一个锚中。我想在桥跨正下方安装一个锚。但是，如果外部锚被删除/移除，我可以。你能告诉我如何改变我的css/代码来实现这一点吗。跨度和按钮必须仅在悬停时可见。




Answer 1

嵌套的代码

<a href="#">
            <img src="http://placehold.it/350x150" />
                <div>
                    <span>My Muse by Zachary Horst</span>
                     <button type="submit" class="btn btn-default">Add button</button>
                </div>
            </a>

Answer 2

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

So, by definition, the behaviour is undefined.

更改演示

只需将锚定标签置于初始标签下方即可

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

编辑：-

解决方法：您可以在div中使用span，通过触发click事件并在其内部使用jQuery来模拟锚定标记的功能。get（）方法发出HTTP get请求

使用span模拟锚定标记的演示