CODEWITHSUNDEEP
jqueryhtmlcss
justLearning
justLearning

Reputation: 187

how to achieve a fadeIn on hover through JQuery?

I am trying to make a a span appear on mouseOver or hover in JQuery. What I would like to have happen is, when I hover over box1, "sale" should appear. It is not working, can someone help?

JS Fiddle

HTML: 

<div id="columnOne">
        <span id="sale">for sale</span>

       <div id="box1"></div>

        <div id="box2"></div>
    </div>

CSS:

#sale{width: 85px;
    margin: 0 0 -45px 15px;
    padding: 5px;
    position: relative;
    display: none;
    font-size: 14pt;
    font-family: 'oxygen', serif;
    background-color: #000;
    color: #fff;
    text-transform: uppercase;

    -webkit-border-radius: 5px 5px;
    -moz-border-radius: 5px 5px;
    border-radius: 5px 5px;}

#box1{width: 240px;
    height: 220px;
    margin: 10px;
    position: relative;
    display: block;
    background-color: #4174a8;
    background-image: url(../images/crown.png);
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;}

JQuery:

$(document).ready(function(){
    $('#boxt1').hover(function(){
        $('#sale').mouseOver('fast');
    });

});

Upvotes: 0

Views: 320

Answers (2)

PSL
PSL

Reputation: 123739

You have couple of issues:

  • You are not using fadeIn instead you are using mouseOver which is an event.
  • Your selector is incorrect.
  • You have a negative z-index on box1 so you never get it hovered upon, since its parent has higher z-index you end up hover that.
  • Also note that , by default div is a block level element so it will take the full width of the container so even if you go to the right side of the div it is still on div so your mouseleave doesn't get triggered. You can instead float/make it inline-block the div to make it take only the dimension specified.

Try

$(document).ready(function () {
    $('#columnOne').hover(function () {
        $('#sale').fadeToggle('fast');
    });

});

Fiddle

Upvotes: 4

Tim Sheehan
Tim Sheehan

Reputation: 4014

You are targeting $('#boxt1') in your jQuery instead of $('#box1') which may be causing problems, and I'm unsure as to why you're triggering a mouseover event. This should work:

$(document).ready(function(){
    $('#box1').hover(
        function(){
            $('#sale').stop().fadeIn();
        }, 
        function(){
            $('#sale').stop().fadeOut();
        }
    );
});

Upvotes: 1

Related Questions