Add border on mouseover

jquery hover onmouseover
Ankur picture Ankur · Jun 4, 2009 · Viewed 26.8k times · Source

I want to have a table border (which I can set using css, rather than the inline border= attribute) to be set to border: 1px solid black; when I mouseover the table.

How do I go about doing this in jQuery. I think it's identical to what's happening to the buttons at the top of this page (Questions, Tags, Users etc) except that is a div having it's background color changing whereas I want to change the border of a table. But the concept is the same.

Answer

Philippe Leybaert picture Philippe Leybaert · Jun 4, 2009

For hovering effects, jQuery provides the hover() pseudo-event, which behaves better than moueseenter/mouseleave. Also, it's a good idea to create a CSS class for each state (normal and hovered), and then change the class on hover:

$(document).ready(function() {
    $("#tableid").hover(
        function() { $(this).addClass("Hover"); },
        function() { $(this).removeClass("Hover"); }
    );
});

Your CSS could look like this:

table.Hover { border: 1px solid #000; }

Related questions

jQuery onmouseover + onmouseout / hover on two different divs

I've got a Problem: Here a part of my HTML: <div id="div_1"> Here Hover </div> <div id="div_2"> Here content to show </div> And here a part of my jQuery Script: …

Read More
Using JQuery hover with HTML image map

I have a complicated background image with a lot of small regions that need rollover illustration highlights, along with additional text display and associated links for each one. The final illustration stacks several static images with transparency using z-index, and …

Read More
show/hide a div on hover and hover out

I would like to show and hide a div during hover and hover out. here's what I've done lately. css My problem is that when I hover on the menu id, the flyout div is blinking. why is that?

Read More