Hover div, show other div

Question

<div id="quickstart">
    <asp:HyperLink ID="hlHemenBasla" runat="server">Deneyim Paylaş</asp:HyperLink>        
</div>
<div id="visiblepanel" class="visiblepanel"></div>

I have two div s on my website.

While I am hovering on div#quickstart , div#visiblepanel should be visible; at other times, it should not be.

I found some code on the internet, but I "couldn't run none".

Answer 1

First, make sure you're NOT self closing your <script> tags.

It should be:

<script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script>

NOT

<script type="text/javascript" src="Scripts/jquery-1.6.2.js"/>

Then to show/hide:

$('#quickstart').hover(function() {
    $('#visiblepanel').toggle();
});

jsfiddle

Answer 2

If there are no other elements between #quickstart and #visiblepanel , you can do it like this with just CSS:

#visiblepanel {
    display: none
}
#quickstart:hover + #visiblepanel {
    display: block
}

http://jsfiddle.net/aNTEA/

Answer 3

Or, not using jquery:

<div id="quickstart" onmouseover="document.getElementById('visiblepanel').style.display='block'" onmouseout="document.getElementById('visiblePanel').style.display='none'">
    <asp:HyperLink ID="hlHemenBasla" runat="server">Deneyim Paylaş</asp:HyperLink>  
</div>
<div id="visiblepanel" class="visiblepanel"></div>

Answer 4

Heres something.. http://jsfiddle.net/RuFXV/

HTML:

<div id="hoverThis">
    <span>This is just chilling here...</span>
    <p>...and this is shown when you hover over #hoverThis div</p>
</div>

CSS:

#hoverThis {
    float: left;
    border: 1px solid #e1e1e1;
    padding: 10px;
}

#hoverThis p { display: none; }
#hoverThis:hover p { display: block; }

Answer 5

Use jQuery and its hover and css methods

$('#quickstart').hover(
  function(){$('#visiblepanel').css('visibility','visible')},
  function(){$('#visiblepanel').css('visibility','hidden')}
);