0

我想使用悬停时效果很好的图像制作菜单。我有一个问题，当元素悬停（并且元素改变大小）时，悬停的 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);
}

有什么建议么？谢谢！

4

2 回答 2

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);
}
于 2013-10-15T11:57:28.607 回答
0

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

#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-11T23:45:34.877 回答