Question

我想知道是否有人有一个例子，左边有一个div来显示divone divtwo divthree和divfour，但是当你在右侧显示divfive divsix divseven并且转向时。当任何一方悬停在http://i.imgur.com/T4leQWE.png

时，我希望它看起来像这样

但是，右侧和左侧应显示不同的内容。当双方都没有被徘徊时，什么都不显示。

此外，这里有捕捉...... div必须是可重复的，并且会在页面上多次共享唯一的名称，因为这是一个帐户信息面板。在同一页面上最多可以有10个

Answer 1

查看 EXAMPLE

这不完全符合您的要求，但您可以根据这些来定制它并实现您的需求。

我正在使用jQuery

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

希望这有帮助

Answer 2

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 - Wrapper div显示为框，子divs样式浮动，或者可以恰到好处并且以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;
}

脚本确定此鼠标在哪一侧，然后根据鼠标左侧设置样式，鼠标左侧显示=所有子div上没有

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

悬停在左侧或右侧时的不同div转换/显示

2 个答案: