防止与css转换重叠

我有一些菜单选项卡，它们在悬停时（使用css3转换）滑出以显示子项。如果其中一个菜单选项卡很长，则它与另一个元素重叠。当转换发生时，我希望菜单选项卡将此元素"推开"。

如果这可以在没有javascript的情况下完成，那就太好了，但我确信这是不可能的，所以如果必须有javascript，我更喜欢JQuery。

下面是一个例子。

<head>
<style>
#menu div
{
    background-color: #cccccc;
    position: relative;
    float: left;
    clear: left;
    margin-bottom: 10px;
    width: 75%;
    right: 50%;
    transition: right 0.5s;
}
#menu div:hover
{
    right: 0;
}
#menu div h1
{
    float:right;
}
#sidebar
{
    background-color: #999999;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
}
</style>
</head>
<body>
    <div id="menu">
        <div><h1>Tab 1</h1></div>
        <div><h1>Tab 2</h1></div>
        <div><h1>Tab 3</h1></div>
    </div>
    <div id="sidebar"><h1>Sidebar</h1></div>
</body>

我希望这些标签在动画将它们放在一起后"推"到侧边栏上。

在jsfiddle上：http://jsfiddle.net/tueg8c76/
这是我正在处理的页面：http://dunamixdanceproject.com/portal.php

我可以给你一个小技巧。

将这个jQuery添加到$（document）.ready函数内的头中。

JQuery

$('#menu div').mouseenter(function(){
    $('#sidebar').css({'left': '1100px'});
});
$('#menu div').mouseleave(function(){
    $('#sidebar').css({'left': '845px'});
});

CSS-将其添加到#侧边栏

#sidebar{transition: left 1s;}

这就是的全部功能

相关内容

最新更新

热门标签：