防止重叠与CSS转换

我有菜单选项卡滑出悬停（使用css3过渡）以显示子项目。如果其中一个菜单选项卡很长，那么它与另一个元素重叠。我希望菜单标签在转换发生时将这个元素“推”出来。防止重叠与CSS转换

这将是伟大的，如果这可以完成没有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

来源

2014-09-22 RedHatter

您应该创建一个实例（最短重现问题所需的代码）并将其纳入这个问题本身是交配的。通常不鼓励有问题的代码位于某个外部位置（可能在某个时间后变为非活动状态）的问题。 – Harry 2014-09-22 06:05:03

你可以复制相同的jsfiddle，http：//jsfiddle.net – dreamweiver 2014-09-22 06:16:33

嗯，我可以建议你一个小窍门。

将此jQuery添加到$（document）.ready函数内的头部。

JQuery的

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

CSS - 添加这#sidebar

#sidebar{transition: left 1s;}

这是所有工作起来

来源

2014-09-22 06:32:41 Awesomestvi

这几乎是我想要的。有了这个代码，当你将鼠标悬停在开发板上时，#sidebar会移动，我不希望它移动，直到转换过程使div接近#sidebar，这让人错觉菜单选项卡实际上是“推动”侧边栏 – RedHatter 2014-09-22 18:03:27

防止重叠与CSS转换

回答

相关问题