CODEWITHSUNDEEP
javascriptjqueryhtmlcss
dmrc1143
dmrc1143

Reputation: 91

Hover div, show other div

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

I have two divs 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".

Upvotes: 0

Views: 10181

Answers (5)

Joonas
Joonas

Reputation: 7303

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; }

Upvotes: 0

Gabe
Gabe

Reputation: 50493

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

Upvotes: 3

thirtydot
thirtydot

Reputation: 228162

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/

Upvotes: 3

jsoverson
jsoverson

Reputation: 1717

Use jQuery and its hover and css methods

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

Upvotes: -1

Erty Seidohl
Erty Seidohl

Reputation: 4559

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>

Upvotes: 0

Related Questions