Question

我有悬停时滑出的菜单标签（使用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

Answer 1

好吧，我可以建议你一个小技巧。

将此jQuery添加到$（document）.ready function。

中的头部

<强> JQuery的

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

CSS - 将其添加到 #sidebar

#sidebar{transition: left 1s;}

这一切都是为了解决这个问题

防止与css转换重叠

1 个答案: