Movable Type Community Forum > changing the border around an image on mouseover

Full Version: changing the border around an image on mouseover

Movable Type Community Forum > Additional Resources > Tips and Tricks

bchaplin

Jul 28 2003, 01:41 PM

I just posted a page of photos (part of the 26 things project), and would like to set up the images as links to larger photos.

Is there a way to make the borders around the images change color when the user mouses over them (using CSS, not Javascript)?

The HTML code would look like this:

CODE

and the applicable parts of the stylesheet like this:

CODE

.photo {border: 2px solid #fff;}

Lummox JR

Jul 28 2003, 01:49 PM

You should be able to change the border color this way:

CODE

a:hover .photo {border-color: #eee}

In theory I think just .photo:hover is supposed to work, but I think IE doesn't recognize :hover on anything besides a link.

Lummox JR

Lela

Jul 28 2003, 02:52 PM

I think you've stumbled across one of those IE bugs ...

You could try the code discussed in This Forum. This at least appears to be supported by IE (although I question its versatility).

kadyellebee

Jul 28 2003, 03:46 PM

This looks nice in Phoenix:

CODE

.photo a:hover, .photo:hover {border: solid 2px black;}

I don't know if older versions of IE will do anything with this, but it seems like it should work in IE6 at least. .photo a:hover seems to work better than a:hover .photo in my previous experience.

Kristine

bchaplin

Jul 28 2003, 03:49 PM

I looked at the discussion on the forum that Lela pointed to, but as it turned out, Lummox's code worked in both IE and Safari (on a Mac). Good enough for me! Thanks for the help.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.