0

我的菜单有这个 CSS：

#menu {
    display:inline;
    float:right;
}
#menu > ul > li {
    display:inline-block;
    margin-right:20px;
    min-width:70px;
}
#menu > li {
    display:inline-block;
    list-style:none;
    margin-left:auto;
    margin-right:auto;
}
#menu > li:hover {
    color:#000000;
}
#menu li a {
    display:block; 
    padding-top:25px;   
    border-top:4px solid #FFFFFF;
    color: #FFFFFF;
    text-decoration:none;
    text-align: center;
}
#menu li a:hover { 
    border-color:#000000; 
    color:#000000;
}

我希望能够在链接悬停时从侧面滑入底部边框（如顶部但在底部）

这是一个小提琴：http: //jsfiddle.net/2w6NB/

4

2 回答 2

0

定位您想要从左侧出现的元素

left: -200px; //or however much it takes to hide the element completely or partially

然后这里有一些示例代码，您可能可以成功地使用它们来模拟您的功能：

$( "#item" ).hover(function() {

        $( "#item" ).stop().animate({
            left: "-1" //shows item
        }, 400);}, function() {


        $( "#item" ).stop().animate({
             left: "-160" //this determines how far back the item goes after hovering 
        }, 400);

});

让我知道您是否有任何问题或它是否有效。

于 2013-09-26T19:59:12.087 回答
0

我相信这个链接会对你有所帮助：Sliding with CSS and Affect Other Element on Hover

"overflow:hidden;"这里的目标是使用 CSS webkit 转换或 javascript 函数从 div 中滑动线条/边框。您不能在与菜单链接相同的对象上发生这种情况，但您可以对其进行设置，以便在其正下方有一个 div 可以让栏滑入。

（这方面的一个例子是将"right:200px;position:absolute;width:200px;border-top:solid black 5px;"内部对象和围绕它的 div 设置为"overflow:hidden;width:200px;"。然后您使用 css 悬停事件或 javascript 函数上的转换将对象移回 div 以便它可以显示。

我希望这会有所帮助！

于 2013-09-26T20:11:07.523 回答