Which is best to use, li:hover or js mouse_over

[Anonymous]

I’m wanting to link to another page and have the “button” change colour. Which is best for download time, plain css using li.hover to change the appearance or onmouse_over with two small images (~134px by 21px)?

Thanks in advance.

[Paulie_D]

I’m against having JS in HTML to perform something that CSS or linked JS can do.

Performance would be the same in practical terms…but if JS isn’t enabled (not a common thing these days) wouldn’t you lose the effect?

[Anonymous]

@Paulie_D

Trying to reply here. No dice. No funky scripting this time either.

[Anonymous]

Hi Paulie,

I have this, so far (I hope the coding is ok). I was just worried it was a long winded way of achieving something with a clickable link like this.

You’re for the CSS route shown above?

[Paulie_D]

Sometimes the links set -off a flag for some unknown reason….or it could just be you.

:)

[Anonymous]

….or it could just be you.

LOL. My money is on that!

If it weren’t for bad luck, I’d have no luck at all. Gloom, despair and agony on me.

[Paulie_D]

It’s not entirely clear to me what you are trying to do but you mention a clickable link.

Now, first question…is a link to somewhere or a clickable (whatever) that does something?

You might want to take quick look at this thread – https://css-tricks.com/forums/topic/div-as-a-button/#post-181475

Now, in either case, the image itself is not ‘content’…it’s only there for styling purposes..at least as I understand what you are trying to so.

To my mind, if it’s styling, it’s CSS (say it with me!) and we can manage that through background-image and swap it out on :hover..if more fancy effects are required we can find options that work.

[Paulie_D]

So, basically…it’s just a link to another page which would need text (for screenreaders) [but that can be hidden] and a couple of images as backgrounds that get swapped out on hover (or mouse_over).

We don’t really need JS for that.

How big is the link [and thus the bg image(s) ] going to be?

[Anonymous]

Can’t post here again!

[Anonymous]

Yes, just basically a link to another page. If something like this

`

<a href="TARGET URL GOES HERE"><img src="URL of image1" onmouseover="this.src='URL of image2'" onmouseout="this.src='URL of image1'" /></a>

`

is best, then two images of 135px wide by 20px high would be used. The other example I gave used no JS, just CSS and an li class.

Which route is better?

Many Thanks!

[Paulie_D]

It’s something about anything that even looks JS function-like in code or text that’s flagging it up.

Firstly, as I said, not having text in a link is a big accessibility no-no so you should have something but it can be easily hidden and there are multiple techniques.

The images are there for styling only so they should be in the CSS as a background images on each state (hovered or unhovered).

Which is best for download time

No difference…the images would (I think) be downloaded anyway (or if not, only when called) whether by CSS or JS.

If the images would be used multiple times (perhaps for multiple links) then maintainability would be on the side of CSS as you would only have to change the CSS once if you decided to change the image..whereas you would have to change it in the HTML on every page manually in the JS solution (unless the pages are created by server side code).

I see no real need to use JS to do something that CSS can do…and if JS is required it should be abstracted out into a separate JS file and not handled inline (IMO).

[Anonymous]

Hi Paulie,

not having text in a link is a big accessibility no-no

The li class is basically the same as is used in a nav bar. In fact, I pared down the nav bar I’m hoping to use on the site I am working on. There is text in those only as what is placed in the <a href="">exaple</a> tags, and the same would be used if I went the li class route for the subject at hand. Isn’t the text in the <ahref=""> meet the criteria you mention?

Thanks!

[Paulie_D]

Isn’t the text in the <a href=""> meet the criteria you mention?

Nope…screen readers (as far as I know) won’t read that…they’ll just skip over it.

http://www.w3.org/TR/WCAG10-HTML-TECHS/#link-text

http://www.sitepoint.com/15-rules-making-accessible-links/

You may be able to get away with link text by using the ‘title’ attribute though.

Of course you may not wish to worry about this issue.

[Anonymous]

Tried to post here again 3x. Anyway, I’m going with using the images and non-css.

Thanks Paulie!

[Anonymous]

Hi Paulie,

I think I’ll go with the on_mouseover="this.src=approach. Less code and more straightforward. It just seems like “old school” after trying to learn CSS.

Thanks so much Paulie!

[Author]

Posts