CODEWITHSUNDEEP
jquery
StyleOnPC
StyleOnPC

Reputation: 39

jQuery this mouseEnter and mouseLeave

I did search for the answer around stackoverflow but couldn't find something specific to the problem that I'm having.

I have multiple divs with the id "forum-cat", and I want it so that when you mouseEnter one of them, it adds the class "mEnter" and when you mouseLeave it removes the class.

This is my PHP:

echo '<div class="well" id="forum-cat">';
echo '<h3 style="margin-top: 20px; margin-bottom: 0px;"><a href="index?id=' . $row2['id'] . '">' . $row2['name'] . '</a></h3>';
echo '<p class="desc">' . $row2['description'] . '</p>';
echo '</div>';

And this is my jQuery:

$(document).ready(function() {
     $('#forum-cat').mouseEnter(function() {
          $(this).addClass('mEnter');
     });
     $('#forum-cat').mouseLeave(function() {
          $(this).removeClass('mEnter');
     });
});

I'm not really experienced in jQuery :p thanks!

Upvotes: 1

Views: 112

Answers (3)

StyleOnPC
StyleOnPC

Reputation: 39

My solution, thanks to: EfrainReyes, was to use CSS (.forumcat:hover) rather than jQuery. Thank you everyone who tried to help :)

Upvotes: 1

Carth
Carth

Reputation: 2343

It seems like toggleClass and hover might serve you better here.

$(document).ready(function() {
     $('.forum-cat').hover(function() {
          $(this).toggleClass('mEnter');
     });
});

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

You can only have ONE id of the same per page. So you'll need to use class instead. Change the html to .forum-cat instead of #forum-cat. And then the following should work fine.

Also, it's mouseenter not mouseEnter

$(document).ready(function() {
     $('.forum-cat').mouseenter(function() {
          $(this).addClass('mEnter');
     });
     $('.forum-cat').mouseleave(function() {
          $(this).removeClass('mEnter');
     });
});

Upvotes: 2

Related Questions