魔术线宽度错误

Question

我有这个 Jquery JS 脚本，它接受一个 UL LI A 并通过添加一个 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")
    });    
});

魔术线宽度错误

Magic Line takes wrong width

javascript

css

jquery

magicline