CSS3推動div相對於其他div移動

看看這個JSfiddle。我想推動另一個有「推動這個！」的div當菜單調整/擴展懸停時。這完全可能與CSS？CSS3推動div相對於其他div移動

<div id="nav"> 
<ul> 
    <li><a href=""><span>01</span> HomePage</a> 
    </li> 
    <li><a href=""><span>02</span> SubPage 1</a> 
    </li> 
    <li><a href=""><span>03</span> SubPage 2</a> 
    </li> 
    <li><a href=""><span>04</span> SubPage 3</a> 
    </li> 
    <li><a href=""><span>05</span> SubPage 4</a> 
    </li> 
</ul>

<div id="pad">push this!</div>

來源

2015-10-26 Rex

1）其他div不在jsfiddle中， 2）你推什麼意思？如果你想使用css動畫 - 你可以創建一個：懸停選擇器並更改#pad的css –

對不起，現在它在NurBar中。我希望它移開擴展菜單。 – Rex

變化#nav的風格從position: absolute到float: left。否則，#nav將在文檔流之外進行，並且不會影響其他元素的位置。

一旦你做到了這一點，你可以從#pad刪除padding-left：

Fiddle 1

你可以得到相同的效果，而無需使用jQuery的。添加這個CSS：

#nav { 
    width:35px; 
    transition: width 0.5s; 
} 

#nav:hover { 
    width: 200px; 
}

Fiddle 2

來源

2015-10-26 21:58:10

如果你真的想用jQuery做像你在的jsfiddle，然後再考慮：

$(function() { 
$('#nav').hover(function() { 
    $(this).animate({ 
     width: '200px' 
    }, 500); 
    $('#pad').animate({'padding-left':'200px'},500); 
}, function() { 
    $(this).animate({ 
     width: '35px' 
    }, 500); 
    $('#pad').animate({'padding-left':'35px'},500); 
}).trigger('mouseleave');

}）;

來源

2015-10-26 22:10:44 bigtlb

CSS3推動div相對於其他div移動

回答

相關問題