Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > can't get css hover to work on link borders

Reply
Thread Tools

can't get css hover to work on link borders

 
 
Greg N.
Guest
Posts: n/a
 
      06-28-2005
Lauri Raittila wrote:

>
> a:hover img {}
>


Lauri, forgive my ignorance, but what is the semantics of that?

The rule applies when an <img> elements within an <a> is pointed at?

 
Reply With Quote
 
 
 
 
Dylan Parry
Guest
Posts: n/a
 
      06-28-2005
Using a pointed stick and pebbles, Greg N. scraped:

>> a:hover img {}
>>

> The rule applies when an <img> elements within an <a> is pointed at?


Yes, that's exactly what the above means.

--
Dylan Parry
http://webpageworkshop.co.uk -- FREE Web tutorials and references
 
Reply With Quote
 
 
 
 
Lauri Raittila
Guest
Posts: n/a
 
      06-28-2005
in alt.html, Greg N. wrote:
> Lauri Raittila wrote:
>
> >
> > a:hover img {}


As noted, don't work in IE, even if I thought it would.

> Lauri, forgive my ignorance, but what is the semantics of that?
>
> The rule applies when an <img> elements within an <a> is pointed at?


No, rule will apply to img, that is contained in a that is pointed at. Of
course, you only see difference, if there is something else than single
image in link.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
july
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      06-28-2005
Lauri Raittila wrote:

> in alt.html, Greg N. wrote:
>> Lauri Raittila wrote:
>>
>>> a:hover img {}

>
> As noted, don't work in IE, even if I thought it would.


But it /does/ work in IE. I know there are some circumstances in which
it may not work (I think we discussed this before some time), but in
most cases it certainly does work in IE. Check the site in my sig and
hover over thumbnails. You'll see the border change color, which is
done by the a:hover img{} rule.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      06-28-2005
in alt.html, Els wrote:
> Lauri Raittila wrote:
>
> > in alt.html, Greg N. wrote:
> >> Lauri Raittila wrote:
> >>
> >>> a:hover img {}

> >
> > As noted, don't work in IE, even if I thought it would.

>
> But it /does/ work in IE.


That was my memory as well...

> I know there are some circumstances in which
> it may not work (I think we discussed this before some time), but in
> most cases it certainly does work in IE. Check the site in my sig and
> hover over thumbnails. You'll see the border change color, which is
> done by the a:hover img{} rule.


I made testcase, and it didn't work. So it seems you might need to do
some tricks to make it works, and you may just well do them
accidentally..


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
july
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      06-28-2005
Lauri Raittila wrote:

> in alt.html, Els wrote:
>> Lauri Raittila wrote:
>>
>>> in alt.html, Greg N. wrote:
>>>> Lauri Raittila wrote:
>>>>
>>>>> a:hover img {}
>>>
>>> As noted, don't work in IE, even if I thought it would.

>>
>> But it /does/ work in IE.

>
> That was my memory as well...
>
>> I know there are some circumstances in which
>> it may not work (I think we discussed this before some time), but in
>> most cases it certainly does work in IE. Check the site in my sig and
>> hover over thumbnails. You'll see the border change color, which is
>> done by the a:hover img{} rule.

>
> I made testcase, and it didn't work. So it seems you might need to do
> some tricks to make it works, and you may just well do them
> accidentally..


The trick I remember, is that you have to set the styles (colors
only?) for the regular links too, earlier in the CSS file. Without
that, it doesn't work on images in IE. (this is from memory though -
about a year and a half back when I discovered why it worked/didn't
work)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-28-2005
Els wrote:
> Lauri Raittila wrote:
>
>
>>in alt.html, Els wrote:
>>
>>>Lauri Raittila wrote:
>>>
>>>
>>>>in alt.html, Greg N. wrote:
>>>>
>>>>>Lauri Raittila wrote:
>>>>>
>>>>>
>>>>>>a:hover img {}
>>>>
>>>>As noted, don't work in IE, even if I thought it would.
>>>
>>>But it /does/ work in IE.

>>
>>That was my memory as well...
>>
>>
>>>I know there are some circumstances in which
>>>it may not work (I think we discussed this before some time), but in
>>>most cases it certainly does work in IE. Check the site in my sig and
>>>hover over thumbnails. You'll see the border change color, which is
>>>done by the a:hover img{} rule.

>>
>>I made testcase, and it didn't work. So it seems you might need to do
>>some tricks to make it works, and you may just well do them
>>accidentally..

>
>
> The trick I remember, is that you have to set the styles (colors
> only?) for the regular links too, earlier in the CSS file. Without
> that, it doesn't work on images in IE. (this is from memory though -
> about a year and a half back when I discovered why it worked/didn't
> work)
>

It does *not* work in IE. IE will only recognize the psuedo-class hover
on *A*s, thats way JavaScript hack are required for CSS fly-out list
menus to make them work of IE. A way around this for OP is to apply the
border change to the A tag. This works...

..left { float: left; }
..imga IMG { border: 0; vertical-align: bottom; }
a.imga { border: 2px solid green; }
a.imga:hover { border: 2px solid red; }

<a class="imga left" href="http://www.google.de"><img
src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>
<a class="imga left" href="http://www.google.de"><img
src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      06-28-2005
in alt.html, Jonathan N. Little wrote:
> >>>>>Lauri Raittila wrote:


> >>>>>>a:hover img {}


> It does *not* work in IE. IE will only recognize the psuedo-class hover
> on *A*s,


Exactly. That's why I but that it to a, not to img.

Why not go look for Els' page? Works on my IE6:
http://locusmeus.com/

> thats way JavaScript hack are required for CSS fly-out list
> menus to make them work of IE.


That is because link can't include another link, like menu would need.
Here we are not trying to make some clueless flyout menu.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
july
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      06-28-2005
Jonathan N. Little wrote:

> Els wrote:
>> Lauri Raittila wrote:
>>
>>>in alt.html, Els wrote:
>>>
>>>>Lauri Raittila wrote:
>>>>
>>>>
>>>>>in alt.html, Greg N. wrote:
>>>>>
>>>>>>Lauri Raittila wrote:
>>>>>>
>>>>>>
>>>>>>>a:hover img {}
>>>>>
>>>>>As noted, don't work in IE, even if I thought it would.
>>>>
>>>>But it /does/ work in IE.
>>>
>>>That was my memory as well...
>>>
>>>
>>>>I know there are some circumstances in which
>>>>it may not work (I think we discussed this before some time), but in
>>>>most cases it certainly does work in IE. Check the site in my sig and
>>>>hover over thumbnails. You'll see the border change color, which is
>>>>done by the a:hover img{} rule.
>>>
>>>I made testcase, and it didn't work. So it seems you might need to do
>>>some tricks to make it works, and you may just well do them
>>>accidentally..

>>
>> The trick I remember, is that you have to set the styles (colors
>> only?) for the regular links too, earlier in the CSS file. Without
>> that, it doesn't work on images in IE. (this is from memory though -
>> about a year and a half back when I discovered why it worked/didn't
>> work)
>>

> It does *not* work in IE.


Does too

> IE will only recognize the psuedo-class hover
> on *A*s,


Correct. the pseudo-class hover /is/ on a, when you apply the style to
the image inside of it.

> thats way JavaScript hack are required for CSS fly-out list
> menus to make them work of IE.


That's a whole different thing. IE does not support :hover on anything
else than the <a> element, that's true. But it does work to apply
styles to elements that are inside the <a> element which is on hover.

> A way around this for OP is to apply the
> border change to the A tag. This works...
>
> .left { float: left; }
> .imga IMG { border: 0; vertical-align: bottom; }
> a.imga { border: 2px solid green; }
> a.imga:hover { border: 2px solid red; }
>
> <a class="imga left" href="http://www.google.de"><img
> src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>
> <a class="imga left" href="http://www.google.de"><img
> src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>


Yes, that works too, but just to prove to you that IE does understand
it the way I described, here's a very simple, temporary example:

http://here.locusmeus.com/temp/doestoo.html

If you would take out the colour style for a:hover, it wouldn't work.
I deliberately gave the a:hover style a different colour than the
borders on the image, so you can be sure it's not the border on the
<a> element that is changing colour when hovering over the image.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-29-2005
Lauri Raittila wrote:
> in alt.html, Jonathan N. Little wrote:
>
>>>>>>>Lauri Raittila wrote:

>
>
>>>>>>>>a:hover img {}

>
>
>>It does *not* work in IE. IE will only recognize the psuedo-class hover
>>on *A*s,

>
>
> Exactly. That's why I but that it to a, not to img.


The trick was that for IE you have to remove the text decoration on the link

a:focus,
a:hover,
a:active{
text-decoration:none;
}

>
> Why not go look for Els' page? Works on my IE6:
> http://locusmeus.com/
>
>
>>thats way JavaScript hack are required for CSS fly-out list
>>menus to make them work of IE.

>
>
> That is because link can't include another link, like menu would need.
> Here we are not trying to make some clueless flyout menu.
>


*WHAT?* Who said anything about nesting links? Of course nesting links
are invalid, but that had nothing to do with IE not recognizing the
pseudo-class hover on other elements like *LI* elements that are used in
CSS fly-out menus made with lists....


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS hover image link not working in IE dreamee HTML 0 10-01-2011 03:46 PM
css background doesn`t change - hover doesn`t work MZ HTML 7 03-17-2008 11:50 PM
link hover color not honored when using onclick event Richard Thoms HTML 6 12-02-2005 02:55 AM
Tables with different color left and right borders, no top or bottom borders, etc. George HTML 9 10-25-2004 04:25 PM
Order of visited, link, active, hover Ben Amada HTML 7 01-16-2004 06:06 AM



Advertisments