CSS菜單重疊元素

我想製作一個使用圖像的菜單，當它們被徘徊時效果很好。我有一個問題，當元素被徘徊（並且元素改變大小）時，hovered div將會與其他div重疊。這裏是我迄今所做的：CSS菜單重疊元素

HTML

<div id="bar"> 
    <ul id="elements"> 
     <li> 
      <div id="el1" class="el1"> 
       <img src="bar/img1.jpg" weight="120px" height="100px"> 
      </div> 
      <div class="txt">aaa</div> 
     </li> 
     <li> 
      <div class="el1"> 
       <img src="bar/img2.jpg" weight="120px" height="100px"> 
      </div> 
      <div class="txt">bbb</div> 
     </li> 
    </ul> 
</div>

CSS

#bar { 
    width:800px; 
    height:65px; 
    background: url("bar.png"); 
} 
#elemente ul { 
    display: inline-block; 
    position: relative; 
} 
#elements li { 
    display: inline-block !important; 
    position: relative; 
    padding: 5px; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    transform: scale(1); 
} 
#elements li:hover { 
    -webkit-transform: scale(1.5) translateY(-30px); 
    -moz-transform: scale(1.5) translateY(-30px); 
    -ms-transform: scale(1.5) translateY(-30px); 
    -o-transform: scale(1.5) translateY(-30px); 
    transform: scale(1.5) translateY(-30px); 
}

有什麼建議？謝謝！

來源

2013-10-15 user2881992

你想要發生什麼？你是否想要沒有被盤旋的元素轉移到左/右？ –

是的，正好... – user2881992

使用此CSS

#bar { 
    width:800px; 
    height:65px; 
    background: url("bar.png"); 
} 
#elemente ul { 
    display: inline-block; 
    position: relative; 
} 
#elements li { 
    display: inline-block !important; 
    position: relative; 
    padding: 5px; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    transform: scale(1); 
} 
#elements li:hover { 
    -webkit-transform: scale(1.5) translateY(-30px); 
    -ms-transform: scale(1.5) translateY(-30px); 
    -o-transform: scale(1.5) translateY(-30px); 
    transform: scale(1.5) translateY(-30px); 
    transform: scale(1) translateY(0px); 
}

來源

2013-10-15 11:57:28 Bala

請使用此解決方案 – Bala

嗨巴拉，請嘗試包括一些解釋與您的代碼，以便OP和社區知道你改變了什麼，爲什麼。 – KyleMit

嗨巴拉，你的建議不幸沒有爲我做的伎倆。正如亞當元帥之前所說的，我需要左側和右側的元素左右移動。 – user2881992

變換使得它很難，你可以嘗試以下操作：

#elements li:hover { 
    -webkit-transform: scale(1.5) translateY(-30px); 
    -moz-transform: scale(1.5) translateY(-30px); 
    -ms-transform: scale(1.5) translateY(-30px); 
    -o-transform: scale(1.5) translateY(-30px); 
    transform: scale(1.5) translateY(-30px); 
    padding: 0 35px; 
}

這樣的元素不會互相重疊，因爲我們要確保我們元素周圍有足夠的空間。

我沒有看到一個方法來左右移動只是一個懸停，JavaScript將是解決方案，如果這就是你要找的。也許這樣：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script> 
$(function() { 
    $('#elements li').hover(function() { 
    $('#elements').css('margin-left', '-15px'); 
    }, function() { 
    // on mouseout, reset the margin 
    $('#elements').css('margin-left', ''); 
    }); 
}); 
</script>

來源

2015-11-11 23:45:34 hreitsma

CSS菜單重疊元素

回答

相關問題