Question

我希望在悬停时使用效果很好的图像制作菜单。我有一个问题，当元素悬停（并且元素改变大小）时，悬停的div将与其他div重叠。这是我到目前为止所做的：

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);
}

有什么建议吗？谢谢！

Answer 1

使用此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);
}

Answer 2

变换使其变得困难，您可以尝试以下操作：

#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>

CSS菜单重叠元素

2 个答案: