CODEWITHSUNDEEP
javascriptjquery
Everett
Everett

Reputation: 377

jQuery Mouse Enter Not Working?

I have the following function: 

$(document).ready(function(){
    $('section').mouseenter(function(){
        var id = $(this).attr('id');
        $('a').removeClass('colorAdded');
        $("[href=#"+id+"]").addClass('colorAdded');
    });
});

For some reason, the mouseenter function does not seem to be working. When the mouse scrolls over one of the sections (which have the section tag), the corresponding link (which have the a tag) in the top right corner should gain a green background color. However, it is unresponsive.

Upvotes: 0

Views: 66

Answers (2)

Andang Rian Dimas
Andang Rian Dimas

Reputation: 255

I'm actually don't know why your codepen example is not working, I didn't look into your code carefully, but I tried to create simple code like bellow and it worked. the thing you probably should care about is how you import JQuery into your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

hopefully this following codes can help you.

$(document).ready(function(){
    $('button').mouseenter( function() {
      console.log('hahaha');
    })
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="test">
    <button class="test-button" > test button </button>
  </div>
</body>
</html>

Upvotes: 0

user9019817
user9019817

Reputation:

You just need to change your JS to:

$(document).ready(function(){
    $('section').mouseenter(function(){
        var id = $(this).attr('id');
        $('a').removeClass('colorAdded');
        $("a[href='#"+id+"']").addClass('colorAdded');
    });
});

It was an issue with not including quotations in selecting the a tag with the href targeting.

Upvotes: 1

Related Questions