4

我的代码有问题，宽度似乎有效，但浮动没有。这里是：

这是一个例子：

http://jsfiddle.net/v82ck/

问题：悬停时菜单上的浮动属性没有改变，我希望每个菜单元素下方的行在悬停该菜单元素时滑动到元素下方。

代码并不复杂，我只是不知道发生了什么

JAVASCRIPT：

    $(document).ready(function () { 
    $('#line-menu').css({ //initial state
        'float': 'left',
         'width' : $('#menu-1').width(),
    });
    $('#menu-1').hover(function(){ //first menu element
        var width = $(this).width();

        $('#line-menu').animate({
            'float': 'left',
            'width' : width
        },  "slow");
    });
    $('#menu-2').hover(function(){ //second menu element

        var width = $(this).width();

        $('#line-menu').animate({ 
            'float': 'none', 
            'width' : width
        },  "slow");
    });
    $('#menu-3').hover(function(){ //third menu element

        var width = $(this).width();

        $('#line-menu').animate({
            'float': 'right',
            'width' : width
        },  "slow");
    });
});

CSS，所以你可以看到它

CSS：

#line-menu{
    height: 3px;
    width: 100px;
    position:absolute;
    z-index:50;
    background: #CC0000;
    margin-left:55px;
    padding-left:3px;
    padding-right:3px;
}
#line-menu-container{
    text-align: center;
    min-width: 617px;
    max-width: 1113px;
    margin-left: auto;
    margin-right: auto;
}

这是冲突的部分

HTML：

<header> 
    <div id='menu'>
        <div class='menu-element' id='menu-1'>HORARIOS</div>
        <div class='menu-element' id='menu-2'>UBICACI&Oacute;N</div>
        <div class='menu-element' id='menu-3'>CONTACTO</div>
    </div>
</header>

   <div id='line-menu-container'> //the line contained in a container just to fix the centered position
       <div id='line-menu' ></div>
   </div>

我使用的 jquery 库是https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

我问你们，因为我真的不知道如何解决它......

编辑：已经有一段时间了（2年）。如果我不得不再次这样做，我将使用抽象，例如使用像 twitter bootstrap 这样的框架。没有必要重新发明轮子。

4

1 回答 1

3

您不能将float属性用于绝对定位的元素。实际上它并没有改变任何东西，position: relative而是使用它。

看来你想根据悬停元素的偏移量来定位width元素left，你可以使用offset方法和 CSSleft属性而不是float属性：

$(document).ready(function () {    
    var $first = $('#menu-1'), $line = $('#line-menu');
    $line.css({
        'width' : $first.width(),
        'left'  : $first.offset().left
    });
    $('#menu > div').mouseenter(function(){
        var $this = $(this),
            width = $this.width(),
            left  = $this.offset().left;

        $line.stop().animate({
            'left'  : left,
            'width' : width
        },  "slow");
    });
});

http://jsfiddle.net/2dwJR/

于 2012-12-29T21:06:24.800 回答