2

我想知道是否有人有一个例子，让一个 div 悬停在左侧以显示 divone divtwo divthree 和 divfour，但是当悬停在右侧时显示 divfive divsix divseven 和 diveight。当任何一方悬停时，我希望它看起来像这样：http: //i.imgur.com/T4leQWE.png

但是，右侧和左侧应该显示不同的内容。当双方都没有悬停时，什么也不显示。

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

4

2 回答 2

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 回答
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 - Wrapper 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;
}

脚本来确定该鼠标是哪一侧，然后根据鼠标在哪一侧设置样式，鼠标离开时 display = none 对于所有子 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');
});
于 2013-08-28T01:10:48.810 回答