how to hide one div and hide another on hovering image or text?

Question

Hi suppose below is the code

<h1>Hover Me</h1>
<div id="showme">Show</div>
<div id="hideme"><Hide</div>

If i hover on text the div with id showme should be shown and hide me should be hidden.Please provide me solution either in jscript or css.Thanks

Answer 1

on :hover of h1 the div will be visible and other div vill be hidden

 h1:hover ~ #showme, #hideme { display: block } h1:hover ~ #hideme, #showme { display: none } 

 <h1>Hover Me</h1> <div id="showme">Show</div> <div id="hideme">Hide</div> 

Answer 2

A possible jquery solution:

<h1 class='hover'>Hover Me</h1>
<div id="showme">Show</div>
<div id="hideme">Hide</div>

$('#hideme').show();
$('.hover').hover(function () {
    $('#hideme').hide();
}, function(){
    $('#hideme').show();
});

FIDDLE HERE