< style >
-sharpparent{
position:relative;
width:100px;
height:100px;
background:-sharpf99;
}
-sharpchildren{
position: absolute;
width:100px;
height:100px;
right:-100%;
top:0;
background:-sharp99f;
display:none;
}
< / style >
< div id= "parent" >
<div id="children"></div>
< / div >
< script >
var eParent = document.getElementById('parent')
var eChildren = document.getElementById('children')
eChildren.onmouseover = eParent.onmouseover = function(e){
eChildren.style.display="block"
}
eChildren.onmouseout = eParent.onmouseout = function(e){
eChildren.style.display="none"
}
< / script >
Does
mean this?
-Update
< style >
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
.item{
position:relative;
width:100px;
height:100px;
background:-sharpf99;
border:1px solid -sharpccc;
cursor:pointer;
}
.item div{
position: absolute;
width:100px;
height:100px;
right:-100%;
top:0;
background:-sharp99f;
display:none;
}
< / style >
< ul id= "list" >
<li class="item">
<div></div>
</li>
<li class="item">
<div></div>
</li>
<li class="item">
<div></div>
</li>
< script src= " https://cdn.bootcss.com/jquer.;></script>
<script>
$('.item').on('mouseover',function(){
$(this).find('div').css('display','block')
})
$('.item').on('mouseout',function(){
$(this).find('div').css('display','none')
})
< / script >
*{
margin:0;
padding:0;
}
ul{
list-style: none;
position:relative;
width:500px;
margin:0 auto;
height:500px;
}
.item{
position:relative;
width:100px;
height:100px;
background:-sharpf99;
border:1px solid -sharpccc;
cursor:pointer;
float:left;
}
.hidden{
position: absolute;
width:100px;
height:100px;
background:-sharp99f;
display:none;
top:100%;
left:0;
}
.bu{
display:block;
width:100%;
height:100%;
}
< / style >
< ul id= "list" >
<li class="item">
<a class="bu" href="www.baidu.com"></a>
<div class="hidden"></div>
</li>
<li class="item">
<a class="bu"></a>
<div class="hidden"></div>
</li>
<li class="item">
<a class="bu"></a>
<div class="hidden"></div>
</li>
< script src= " https://cdn.bootcss.com/jquer.;></script>
<script>
$('.item').on('mouseover',function(){
$(this).find('.hidden').css('display','block')
})
$('.item').on('mouseout',function(){
$(this).find('.hidden').css('display','none')
})
< / script >