Question

我的菜单中有这个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/

Answer 1

将您想要的元素从左侧放置为

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);

});

如果您有疑问或是否有效，请告诉我。

Answer 2

我相信此链接可以为您提供帮助：Sliding with CSS和Affect Other Element on Hover

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

（例如，将"right:200px;position:absolute;width:200px;border-top:solid black 5px;"设置为内部对象，将其周围的div设置为"overflow:hidden;width:200px;"。然后使用css悬停事件或javascript函数上的转换移动对象回到div，以便它可以显示。

我希望有所帮助！

在悬停时从左侧滑动底部边框

2 个答案: