ansaurus

Question

change background color of current element

Answer 1

+3 A:

Almost there.

<li onmouseover="this.style.backgroundColor='#000';">something</li>

http://codepunk.hardwar.org.uk/css2js.htm

Daniel A. White 2009-12-13 00:05:14

Is it better to use hover css or javascript for this sort of things? I mean what is more elegant (better practice)

Gandalf StormCrow 2009-12-13 00:09:41

Are you just changing it one time? How important is cross browser? Do you have jquery?

Daniel A. White 2009-12-13 00:12:37

It's very important that it should be cross-browser .. I used your javascript answer it works in IE8 most probably in IE7 as well .. and firefox of course, it renders almost anything .. I'll accept your answer. I won't use jquery cause I will not use a lot of its cool features, I just need "small" enhancements nothing fancy and no need to load additional nkb cause my background is pretty heavy ..

Gandalf StormCrow 2009-12-13 00:15:37

though css must be used indeed to solve the problem, i would not recommend inline javascript too. myLi.onmouseover=function(){} or something else is much better anyway. i don't know which browser excluding ie6 has not :hover support

Lyubomyr Shaydariv 2009-12-13 00:21:16

I just tried IE8 , currently using it to view this website .. and it doesn't work and still plenty of people(the ones with illegal copy of windows) use IE6

Gandalf StormCrow 2009-12-13 00:23:40

Answer 2

+2 A:

this.style.backgroundColor= 'black';

Or if you can, better in simple CSS:

li:hover { background-color: black; }

bobince 2009-12-13 00:05:18

Not all browsers fully suport the :hover psuedo-class

Daniel A. White 2009-12-13 00:06:25

hmm I didn't know that hover works with li, I thougt its only used for a element

Gandalf StormCrow 2009-12-13 00:06:48

@Gandoalf, it does it more modern and standards compliant browsers.

Daniel A. White 2009-12-13 00:07:33

Hmm.. it doesn't work in IE8 and most probably not in IE7 .. the hover thing

Gandalf StormCrow 2009-12-13 00:11:06

the hover pseudoclass does work in IE6+ on elements that already have that functionality. So pretty much just `<a>` tags.

Alex Sexton 2009-12-13 00:16:44

first, ie6 is gonna die. second, since ie6 supports a:hover only, we can use "a:hover element" hack to simulate hover behavior with no javascript at all

Lyubomyr Shaydariv 2009-12-13 00:23:05

I already have a tag inside <li> but I want the whole block to change the background

Gandalf StormCrow 2009-12-13 00:24:19

`li:hover` works on IE7 in Standards Mode (and you should definitely be using a Standards Mode DOCTYPE). If you really need IE6 to look ‘just right’ (personally for minor styling issues I don't always bother any more), then either put the hover on the `<a>` and style that with `display: block` to make it take up the whole width, or if that's not possible the old-school JS is the only solution left.

bobince 2009-12-13 00:41:30

also i would like to say, i totally agree with bobince's last comment and two solutions he proposed (sure, the css solution is much better in the case). regarding to the javascript usage, i always divide javascript and markup to make the markup free of scripts and clear as it was shown in the post

Lyubomyr Shaydariv 2009-12-13 00:52:28

Indeed. Inline attributes are good for demo code, but in real life binding from script is almost always the better route.

bobince 2009-12-13 02:26:49

Answer 3

A:

CSS hover would probably be the most elegant solution, there is an IE6 fix for this: csshover.htc

But if it were me I would use jQuery, and it would provide you excellent cross-browser support.

jnunn 2009-12-13 00:43:47

ansaurus

tags:

views:

answers:

change background color of current element

related questions