2

左側にホバーして divone divtwo divthree と divfour を表示する div を持つ例があるかどうか疑問に思っていますが、右側にホバーすると divfive divsix divseven と divight が代わりに表示されます。どちらかの側にカーソルを合わせると、次のようになります。http://i.imgur.com/T4leQWE.png

ただし、右側と左側では異なる内容を表示する必要があります。どちらの側もホバーされていない場合は、何も表示しません。

また、ここに問題があります... div は反復可能である必要があり、これはアカウント情報パネル用であるため、ページ上で一意の名前を複数回共有します。同じページに最大 10 個まで存在できます

4

2 に答える 2

0

HTML - ラッパー div には一意の名前があります。子 div には右または左のクラス名があります

<div id="containerOne">
<div class="left" style="display:none;">Left Side 1</div>
<div class="left" style="display:none;">Left Side 2</div>
<div class="left" style="display:none;">Left Side 3</div>
<div class="right" style="display:none;">Right Side 1</div>
<div class="right" style="display:none;">Right Side 2</div>
<div class="right" style="display:none;">Right Side 3</div>
</div>

CSS - ラッパー div はボックスとして表示され、子 div のスタイルはフロート、または 100% の div 幅でテキストを適切に揃えることができます

#containerOne {
margin: 0 0 0 30px;
width: 250px; 
height: 200px;
border: 1px solid #333;
}
.left{
float:left;
width:100%;
text-align:left;
}

.right{
float:right;
width:100%;
text-align:right;
}

このマウスがどちらの側にあるかを判断するスクリプトを作成し、マウスがオンになっている側に基づいてスタイルを設定します。

function UpdateStyle(cls, style){
var left_ele = document.getElementsByClassName(cls);
    for (var i = 0; i < left_ele.length; ++i) {
            var item = left_ele[i];  
            item.style.display = style;
        }   
}
$("#containerOne").on('mousemove', function(e) {
var mouseSide;
if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
    UpdateStyle('left','block');
     UpdateStyle('right','none');
} else {
       UpdateStyle('left','none');
     UpdateStyle('right','block');
}
}).on('mouseout', function(){
 UpdateStyle('left','none');
     UpdateStyle('right','none');
});
于 2013-08-28T01:10:48.810 に答える
0

この例を見てください

これはまさにあなたが探しているものではありませんが、これに基づいてカスタマイズし、必要なものを達成することができます.

私はjQueryを使用しています

$("#selector").on(
{
    mouseenter: function() 
    {
        $("#toggle").show('slide', {
            direction: 'left'
        }, 1000);
    },
    mouseleave: function()
    {
        $("#toggle").hide('slide', {
            direction: 'left'
        }, 1000);
    }
});

お役に立てれば

于 2013-08-28T01:04:26.750 に答える