javascript - 魔术线宽度错误

我有这个Jquery JS脚本，它采用UL LI A，并通过在LI上方悬停后添加LI项在其下方添加一条魔术线；我的问题是此LI接受您要悬停的LI的with，我需要它取LI A标签的with。我不知道。 （基本上是因为我不懂JS）

<script>
$(function() {

var $el, leftPos, newWidth,
    $mainNav = $("#example-one");

$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current").width())
    .css("left", $(".current a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#example-one li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });
});

}）;

最佳答案

将hover的父级带入a函数，即。 li标记。将功能更改为此：

$("#example-one li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.width();
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });
});