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 に答える