underline images on mouse over

[pieterh]

Hi,

I've put several thumbnails next to each other. Is there a way to have a line appear (about 2px underneath image) on mouse over?

Cheers,
Pieter

[sharkey]

Yes there is i think this should work.

img:hover {border-bottom:2px solid #fff}

[pieterh]

Hi,

Thanks, but it doesn't seem to work:

.thumbs img:hover
{
border: 2px solid #ffffff;
}

Am I doing something wrong?

Cheers,
Pieter

[sharkey]

Yes i think you are there are a few ways to do it. Try this.

.thumbs:hover {border-bottom:1px solid #fff}

[pieterh]

No, that doesn't work.

Here is the complete code:

In stylesheet:



.thumbs td
{
vertical-align: middle;
text-align: right;
}

.thumbs img
{
margin-left: 3px;
}

.thumbs img:hover
{
border: 2px solid #ffffff;
}



On page:



<table border="0" cellpadding="0" cellspacing="0" width="100%" height="95" class="thumbs">

<tr>
<td><a href="page01.htm"><img border="0" src="image01.JPG"></a><a href="page02.htm"><img border="0" src="image02.JPG"></a></td>
</tr>

</table>



Cheers,
Pieter

[sharkey]

Well for a start you havent added the class to the images and it should be like this.

img.thumbs:hover {border-bottom:2px solid #fff}

[pieterh]

the class is in the table

In the stylesheet:



.thumbs img
{
margin-left: 3px;
}


This works.

When I change stylesheet to:


.thumbs img
{
margin-left: 3px;
border-bottom:2px solid #fff;
}



It also works, but this doesn't work:


.thumbs img:hover
{
margin-left: 3px;
border-bottom:2px solid #fff;
}



Cheers,
Pieter

[sharkey]

If you read my post before it will work you keep changing it back to your own way.

You have this
.thumbs img:hover
{
margin-left: 3px;
border-bottom:2px solid #fff;
}

when i told you this will work
img.thumbs:hover {
border-bottom:2px sold #fff;
}

[Mr J]

Possibly


<style>
.over{border-bottom:2px solid red}
.out{border:0px}
</style>

<img src="image01.jpg" width="50" height="50" onmouseover="this.className='over'" onmouseout="this.className='out'">

[sharkey]

Im about 95% cure my method works as i have used it before but he keeps overlooking what im posting and still using his own css classes.

[pieterh]

Hi Sharkey,

Thanks for the reply. I saw/see what you do different. I treid your suggestion, but it didn't work.

Cheers,
Pieter

[sharkey]

Right use what i gave you up there but add this to the image.

<img class="thumb" src="image2.jpg">

It probably didnt work as you only have the class on the table not the image.

[Ben Rogers]

Pieter, do you use Internet Explorer? IE doesn't support hovering on arbitrary elements. Mr J's suggestion is what you're going to need to be cross browser friendly, unless the imgs are in links, like so:
<a href="#" class="thumbs"><img src="#" height="#" width="#" /></a>
in which case
a.thumbs:hover img {border-bottom: 2px solid #000;}
might work.

[sharkey]

Ohh i forgot about that omega ive been using mozilla for too long:D. Sorry pieter for going through a long process of telling you it was right well it was right but IE is not standards compliant.

[David Harrison]

Ironically you can use proprietary IE CSS to fix it's CSS deficiency. Check out Vladdy's menu (http://www.vladdy.net/Demos/CSSNav.html) and pay particular attention to the behaviour rules.
The .htc file uses VBScript to change the class on the images to "hover" so to reference the images all you would have to do would be this:

img:hover, img.hover{}

Along with any other CSS to reference specific images within certain elements, eg:

.thumbs img:hover, .thumbs img.hover{}

[Ben Rogers]

Suckerfish (http://www.alistapart.com/articles/dropdowns/) could also work nicely.

[David Harrison]

Suckerfish is for dropdown menus, what does that have to do with this? He just wants to underline some images.

[Ben Rogers]

LL- Suckerfish functions to apply a new classname on :hover, and still be cross browser compatible and with standards. A little tweaking, and voila. :D