如何在活动/悬停li项下添加块元素（position：absolute）？

Question

我的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完成此类任务？

Answer 1

看一下有用的.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 class上的hove并将其添加到悬停的DOM。

Answer 2

如果您创建了元素，比如<span>，最初将其设为display:none会更好，然后使用jQuery，您只需使用show()和hide()，就像这样：

if specific element is being hovered over:
   $("#insertedSpan").show();
   $(this).find('a').html('<span class="arrow"></span>');
else
   $("#insertedSpan").hide();

Answer 3

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