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

我想知道是否有人有一个例子，在左边悬停一个div来显示divone、divtwo、divthree和divfour，但是当悬停在右边时，显示divfive、divsix、divseven和divweight。当任一侧悬停在上方时，我希望它看起来像这样：

但是，右侧和左侧应该显示不同的内容。当双方都未悬停在上方时，不显示任何内容

---

还有，这里有一个陷阱。。。div必须是可重复的，并且将在页面上多次共享唯一的名称，因为这是用于帐户信息面板的。同一页面上最多可以有10个

请查看此

这并不完全是你想要的，但你可以基于此来定制它并实现你所需要的

我正在使用jQuery

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

---

希望这有帮助

HTML-wrapper 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>

脚本以确定此鼠标的哪一侧是一个，然后根据鼠标的哪一侧打开来设置样式，对于所有子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');
});

函数更新样式（cls，样式）{
var left_ele=document.getElementsByClassName（cls）；
对于（变量i=0；i

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