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>

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

直到这里一切都很顺利。

然而，只要我在<span>下方添加一个锚点，一切都会被抛出。

<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>上悬停使用时显示跨度下方的锚点按钮。

更新：从评论中我了解到锚不能嵌套在另一个中。我想要一个直接在跨度下面的锚。但是，如果删除/删除外部锚点，我确定。你能告诉我如何改变我的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

只需将锚标记放在最初的

下面

<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事件来模拟anchor标记的功能，并在其中使用jQuery.get（）方法来生成HTTP GET请求

Demo with Anchor tag emulated with span

Answer 2

嵌套<a>是非法的，因此您可以将<a>更改为<button>

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

UL LI中的锚点打破了功能

2 个答案: