1

我的 HTML 代码如下所示：

<ul>
    <li><a href="#link1">Link 1</a></li>
    <li ><a class="active" href="http://google.com">Link 2</a></li>
    <li><a href="asdasdasd">Link 3</a></li>
</ul>

我需要在悬停和a.class="active"上添加一个块元素

该元素应该是一个跨度，例如：

<ul>
    <li><a href="#link1"><span class="arrow"></span>Link 1</a></li><!-- hovering this link -->
    <li ><a class="active" href="http://google.com"><span class="arrow"></span>Link 2</a></li>
    <li><a href="asdasdasd">Link 3</a></li>
</ul>

如何通过 jQuery 完成这样的任务？

4

3 回答 3

2

<span>如果你创建了元素，比如说，并最初制作了它会更好display:none，然后使用 jQuery，你可以简单地使用show()and hide()，如下所示：

if specific element is being hovered over:
   $("#insertedSpan").show();
   $(this).find('a').html('<span class="arrow"></span>');
else
   $("#insertedSpan").hide();
于 2013-02-28T12:26:08.243 回答
2

看看.wrapInner()会有所帮助的 jQuery 方法。

或者

<script type="text/javascript">

    $(function()
    {
        $('ul li').each(function(){
            var text = $(this).find('a').text();
            $(this).find('a').html('<span class="arrow"></span>'+text);
        });     
    });

</script>

<ul>
    <li><a href="#link1">Link 1</a></li>
    <li ><a class="active" href="http://google.com">Link 2</a></li>
    <li><a href="asdasdasd">Link 3</a></li>
</ul>

和hover使用

$('ul li a').hover(function()
{
   $('ul li').find('a').removeClass('active');
   $(this).addClass('active');
});

上面的代码所做的是删除active classonhove并将其添加到 hovered DOM。

于 2013-02-28T12:25:09.960 回答
0

首先，您应该将“li”位置设置为“relative”。然后添加隐藏显示。然后在 a 元素悬停时，使用 jquery 将显示设置为阻止。并且不要忘记您的跨度位置应该是“绝对的”；

于 2013-02-28T12:31:14.070 回答