매직 라인의 너비가 잘못되었습니다.

Question

UL LI A를 사용하는 Jquery JS 스크립트가 있는데 LI 위에 마우스를 올려 놓은 LI 항목을 추가하여 마법 선을 추가합니다. 내 문제는이 LI가 당신이 공중 선회하고있는 LI와 함께한다는 것입니다. LI A 태그를 가지고 가야합니다. 그리고 나는 그것을 이해할 수 없다. (기본적으로 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") 
    });  
}); 

});

Answer 1

귀하의 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") 
    });  
});