show hide div on mouseover и mouseout

Question

<script type="text/javascript"> 
function show_sidebar() 
{ 
document.getElementById('sidebar').style.visibility="visible"; 
} 

function hide_sidebar() 
{ 
document.getElementById('sidebar').style.visibility="hidden"; 
} 
</script> 

<img src="images/cart.jpg" width="80px" height="30px" onMouseOver="show_sidebar()"  onMouseOut="hide_sidebar()"> 

<div id="sidebar">some thing</div> 

Это мой код для показа и скрытия боковой панели div на мыши и мыши. Его работа, но я хочу, когда у меня есть указатель мыши на изображении, отображается боковая панель div, и я хочу, чтобы div боковой панели отображался также, когда мышь над боковой панелью. Как вы можете это сделать.

Answer 1

переместить eventhandlers в оберточную DIV выполнить то, что вы хотите.

<div id="wrapper" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()"> 
    <img src="images/cart.jpg" width="80px" height="30px"> 
    <div id="sidebar">some thing</div> 
</div> 

Answer 2

Невидимые элементы не имеют событий мыши. Попробуйте это:

<script type="text/javascript"> 
function show_sidebar() 
{ 
document.getElementById('sidebar').style.opacity = 1; 
} 

function hide_sidebar() 
{ 
document.getElementById('sidebar').style.opacity = 0; 
} 
</script> 

<img src="images/cart.jpg" width="80px" height="30px" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()"> 
<div id="sidebar" style="opacity: 0;" onMouseOver="show_sidebar()">some thing</div> 

Answer 3

попробовать

<script type="text/javascript"> 
function show_sidebar() 
{ 
document.getElementById('sidebar').style.display="block"; 
} 

function hide_sidebar() 
{ 
document.getElementById('sidebar').style.display="none"; 
} 
</script> 

<img src="images/cart.jpg" width="80px" height="30px" onMouseOver="show_sidebar()"  onMouseOut="hide_sidebar()"> 

<div id="sidebar">some thing</div> 

Answer 4

использовать его с помощью CSS, это проще

<style> 
    #sidebar{ 
     display : none; 
    } 
    img:hover ~ #sidebar { 
     display : block; 
    } 
    #sidebar:hover { 
     display : block; 
    } 
</style> 
<img src="images/cart.jpg" width="80px" height="30px" > 

<div id="sidebar">some thing</div> 

С задержкой:

<style> 
#sidebar{ 

    opacity : 0; 
} 
img:hover ~ #sidebar { 
    opacity : 1; 
} 
#sidebar:hover { 
    opacity : 1; 
} 
#sidebar:not(hover) { 
    animation-delay:2s; 
    -webkit-animation-delay:2s; 
    -webkit-transition: opacity 1s ease-out; 
    opacity : 0; 
} 
</style> 

Answer 5

Здесь:

http://jsfiddle.net/luckmattos/CV9uX/

с Jquery

$('#img').hide(); 

$('#sidebar').mouseover(function() { 
     $('#img').show();  
}); 
$('#sidebar').mouseout(function() { 
     $('#img').hide();  
}); 

HTML

<a id="sidebar">Show on Over</a> 

<div class="img"><img src="http://www.highsnobiety.com/files/2013/05/lamborghini-egoista-concept-car-9.jpg" width="250px" id="img"> 
    </div> 

Answer 6

Если вы можете обернуть их в общий родитель это так просто с помощью только CSS, без JavaScript не требуется.

УС:

#sidebar { 
    display: none; 
} 
.cart:hover #sidebar { 
    display:block; 
} 

HTML:

<div class="cart"> 
    <img src="images/cart.jpg" width="80px" height="30px" /> 
    <div id="sidebar">some thing</div> 
</div> 

Пример:

JSFiddle

Это можно сделать без обертывания, но вы должны убедиться, что изображение и div перекрываются, чтобы курсор мог перемещаться в div. Обертывание позволяет избежать этой проблемы.

Также обратите внимание, что не все используют мышь.