CODEWITHSUNDEEP
jqueryhtmlmouseoveronchangeonhover
user1543008
user1543008

Reputation: 21

Change entire div on mouseover

I have implemented a function where a div gets replaced with another on hover. The issue is that I want it to disappear again on mouseout. But when the other div appears, the mouseout function kicks in as the obviously because the curser is hovering over the new dix...

 $(document).ready(function(){
    $("#div1").mouseover(function() { $("#show-div2").css('visibility','visible');});
    $("#div1").mouseout(function() { $("#show-div2").css('visibility','hidden'); 
});

HTML

<div id="div1"><a id="div1" href="#"><img src="images/email.png"  alt="Email Marketing Services" /></a>
                        </div> 

                        <div id="show-div2" style="visibility:hidden;">
                            Bla Bla Bla
                        </div>

CSS

#div1 {
    display: block;
    width: 91px;
    height: 91px;
    overflow: hidden;
    float: left;
    margin: 0 0 120px 0px;
}


#show-div2 {
    margin: -200px 0 0 -110px;
    padding: 10px;
    font-size: 14px;
    width: 270px;
    height: 340px;
    position: absolute;
    visibility: visible;
    text-align: center;
    color: black;
    background-image: url(images/email-hover.png);
    background-repeat: no-repeat;
}

Upvotes: 2

Views: 3882

Answers (3)

Shant
Shant

Reputation: 237

Have made few changes in your code. Check this out... Demo. Hope this is what you are looking for.

Upvotes: 1

A.M.K
A.M.K

Reputation: 16795

You can just set the mouseleave event on the shown DIV, like this:

Demo: http://jsfiddle.net/SO_AMK/hAdcm/

jQuery: 

$("#div1").mouseenter(function() {
    $("#show-div2").css('visibility', 'visible');
});
$("#show-div2").mouseleave(function() {
    $("#show-div2").css('visibility', 'hidden')
});​

HTML: 

<div id="div1">
    <a id="div1" href="#"><img src="images/email.png" alt="Email Marketing Services"/></a>
</div>
<div id="show-div2" style="visibility:hidden;">
     Bla Bla Bla
</div>
  ​

CSS: 

#div1 {
    display: block;
    width: 91px;
    height: 91px;
    overflow: hidden;
    float: left;
    margin: 0 0 120px 0px;
}


#show-div2 {
    padding: 10px;
    font-size: 14px;
    width: 270px;
    height: 340px;
    position: absolute;
    visibility: visible;
    text-align: center;
    color: black;
    background-image: url(images/email-hover.png);
    background-repeat: no-repeat;
}​

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

Use .hover() instead, as this behaves just like the CSS :hover and like IE's onmouseenter and onmouseleave:

(function() {
    var sd2 = document.getElementById('show-div2');
    $("#div1").hover(
        function() {sd2.style.visibility = "visible";},
        function() {sd2.style.visibility = "hidden";}
    );
})();

Note that I used plain JS in the callback functions. This is because it's a hell of a lot more efficient than creating a new jQuery object just to set a single style property. The closure makes it even more effective.

Upvotes: 1

Related Questions