How to add border to image on hover? - css

Question

I am trying to add a border to an image on rollover. The border is not showing when I roll over the image. Here is my code:
<script>
$(document).ready(function() {
$("#imgBorder").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
});
</script>
Hover { border: 1px solid #000; }
<div id="imgBorder">link...
Why isn't the border appearing on hover?
Also, is there any way to do this so that it does not re-size the image when adding the border?

Answer 1

You do not need to use javascript to add hover on image rollover. Just add it to the css class instead.
<style language="text/css">
.rollOver : hover
{
border: 1px solid #000;
}
</style>
<div class="rollOver" id="imgBorder">Test</div>

Answer 2

First, to affect the image, your jQuery should be:
$("#imgBorder img").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
And your CSS should be:
.Hover { /* note the period preceding the 'Hover' class-name */
border: 1px solid #000;
}
JS Fiddle demo.
Note that:
.string selects element(s) by their class-name of string: <div class="string"></div>
#string selects an element by its id, which is equal to string <div id="string"></div>
string selects an element of string: <string></string>
But you don't need JavaScript, just use:
#imgBorder:hover img,
#imgBorder img:hover {
border: 1px solid #000;
}
JS Fiddle demo.

Answer 3

Something like this will work in CSS, link below
.rollover_img {
width: 280px;
height: 150px;
background-image: url(land.jpg);
background-position: top;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:10px solid #ccc;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;
}
I will direct you to the following link
http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/

Answer 4

In your selector below, you're targeting an element with the tagname "Hover". This does not exist.
Hover { border: 1px solid #000; }
What you wanted instead was:
.Hover { border: 1px solid #000 }
As others here have already pointed out, you don't need JavaScript for this as you can use the :hover pseudo-class:
img { border: 1px solid #FFF }
img:hover { border-color: #000; }
For further reading, see http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes