相关代码如下:
css代码:
div#div1 {
position: absolute;
left: -100px;
top: 200px;
background: red;
width: 100px;
height: 100px;
}
#div2 {
width: 10px; /*div2是相对于div1定位*/
height: 50px;
background: black;
position: absolute;
right: -10px;
top: 20px;
color: white;
font-size: 5px;
}
html代码:
<div id="div1">
<div id="div2">分享到</div>
</div>
效果如图:
想要的结果很简单,鼠标移入侧边栏显示,移出时侧边栏消失,结果经测试,当鼠标从红方块移到分享到黑块时,会粗发红块的mouseout和黑块的mouseover事件。
得出结论如下:因为div2已经相对于div1绝对定位了,所以其实已经不是div1的一部分了,鼠标从div1划入div2就会触发mouseout事件