CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3718016
user3718016

Reputation: 157

jQuery mouseover functionality not working properly

On hover functionality is not moving perfect. This is my code and when a mouse is placed over Details* text then whole div color changed to black. But the functionality is not working fine. I want whenever mouse is placed over details text then it should call the hover function but right now its not working fine. Any recommendations?

$('#disclaimer').hover(
        function () {
            $('#wrapper').addClass('hovered');
        }, function () {
            $('#wrapper').removeClass('hovered');
        }
    );

Upvotes: 1

Views: 741

Answers (4)

morgan9999
morgan9999

Reputation: 801

did you already try this ?

$('#disclaimer').mouseenter(
    function () {
        $('#wrapper').addClass('hovered');
    }
);
$('#disclaimer').mouseleave(
    function () {
        $('#wrapper').removeClass('hovered');
    }
);

or with pure css

#disclaimer:hover { 
     //put any attribute on "hovered" class here
}

or maybe i don't understand your question enough.

Upvotes: 0

Pranav
Pranav

Reputation: 666

Try this :

script :

$('#disclaimer').hover(
            function () {
                $('#wrapper').addClass('hover');
            }, function () {
                $('#wrapper').removeClass('hover');
            }
        );

style :

.hover {
    display : block;
    background-color : black;
}
/* new css */
.hover #Image_Car { display: none; }
.hover #ctaBtn {    display: none; }
.hover #Image_logo {    display: none; }
.hover #headlineText {     display: none; }

Fiddle : http://jsfiddle.net/U4EF8/7/

Upvotes: 3

zafus_coder
zafus_coder

Reputation: 4591

Here is the Code : 

$(document).ready(function(){
 $( "#disclaimer" )
 .mouseover(function() {
      $('#wrapper').addClass('hovered');
 })
.mouseout(function() {
   $('#wrapper').removeClass('hovered');
  });

 });

and my html is : 

  <div id="wrapper"></div>
  <div id="disclaimer" style="border:1px solid black;">
    hello    
    </div>

Here is the working example : http://jsbin.com/heduqesu/2/edit , you can check in console that class is added and removed on mouse enter and mouse leave event . Hope this helps . Cheers!

Upvotes: 1

Ramniwas chhimpa
Ramniwas chhimpa

Reputation: 205

  $("#searchput").hover(function() {
     $('#wrapper').addClass("hover");
}, function() {
     $('#wrapper').removeClass("hover");
});

Upvotes: 1

Related Questions