Help with a CSS mouse over effect.

July 23, 2004 10:32 PM

Mouse over a link and a link elsewhere on the page lights up, too. I know how to do it in Javascript (er, I used to) but apparently it can be done with just CSS. How?

I'd look through the source at HappyCog but it's down right now. (Anyway, I remember that source being ubercomplex.)

posted by Tlogmer to Computers & Internet (17 answers total)

You mean like this?
posted by dogwelder at 10:56 PM on July 23, 2004

Response by poster: Ah, alright. Sort of -- but the things that light up (or flip open, or what have you) in that example are all aspects of the same A tag. Fair enough if that's the only possible way, though it makes things a bit inconvenient for me.
posted by Tlogmer at 11:12 PM on July 23, 2004

It's not too hard for me to imagine a hover or a click could trigger a change in another element if you're using sibling selectors, and since you can place a sibling element anywhere on the screen using CSS positioning, this could work pretty easily.

Unfortunately, I just tried this and it doesn't work.

Is this because psuedoclasses don't work with sibling selctors, or because I suck?

(say that seven times speedily)
posted by weston at 11:33 PM on July 23, 2004

Actually, I just noticed something weird: if you mouse over Link2 and then onto Link1, it does work.

What's going on here?
posted by weston at 11:37 PM on July 23, 2004

Response by poster: Hmm. Happy Cog is back up and they've redesigned without that Thing (whatever it's called).
posted by Tlogmer at 12:40 AM on July 24, 2004

Here's what you're looking for. I think it involves having a <span> as a child selector within a :hover and positioning that <span> as desired.
posted by brownpau at 6:33 AM on July 24, 2004

Response by poster: No, that's the same thing as in the first link. (Still cool, tho.)
posted by Tlogmer at 11:39 AM on July 24, 2004

Well... Meyer's solution (what brownpau) does get the job done. Is it just the feeling that you're cheating by having the element live inside the anchor? I can actually understand that -- the semantics of that kind of markup could get ugly, but then again, for Meyer's example, it works, since the span inside is just a longer description of the link.

I'd rather see the sibling selecter method work, though... you'd have potential to get all kinds of crazy hover dependencies across the page.
posted by weston at 12:21 PM on July 24, 2004

Paul Ford over at Ftrain is doing something like this. When you mouseover any part of a particular div, all the links in that div change color. Hovering over a particular link within that div highlights that particular link in a different way.

I'm not a CSS expert, but you can try nosing around in the stylesheet to see if you can figure it out. From what I can tell, he's using both javascript and CSS to make it work.
posted by lewistate at 12:27 PM on July 24, 2004

Not sure if it works in IE, but wouldn't this do?

a.linktorollover:hover div#otherelementonpage {color: different;}
posted by yerfatma at 1:45 PM on July 24, 2004

Response by poster: Nope, doesn't work for me in anything (though I may have done something wrong). I've seen the Ftrain trick before, but never seen it work in IE, so yeah, i think javascript (plus, that's only for child elements).

I think I'll go with the stuff-packed-inside-a-link solution (unless someone comes along with a way to make weston's siblings work -- neat idea). Thanks, everyone.
posted by Tlogmer at 2:26 PM on July 24, 2004

What Paul Ford is doing is a little different: It's more like
div.rollovereffect:hover a {color: different;}
Nice, because it makes the page a little quieter until you start mousing around.

This kind of div:hover trick is showing up on a lot of blogs, so that rolling over a comment puts an outline around it, that sort of thing. Pity it doesn't work for IE (unless you hackishly wrap an A tag around the whole thing).
posted by adamrice at 3:17 PM on July 24, 2004

Weston, your demo worked fine for me in firefox.
hovering over link1 gave link 2 a purlple background and bold orange text. Hovering over link2 gives link2 a yellow background.

I don't remember what, if any, of IE's selector bugs effects sibling selectors, but if there aren't any then the easiest way I've found to get the :hover pseudo class to work in IE comes from this article in ALA. The very short piece of javascript is easily modified to work with any element you want, all it does is add mouseover and mouseout events to the selected element if IE is detected.

The idea of using sibling selectors for dynamic text and links is brilliant, I'm going to steal it. :-)
posted by Grod at 3:46 PM on July 24, 2004

Even more elegant is the javascript from HTML dog in the follow up to the ALA suckerfish article.

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


obviously the only thing you need to change, if your not doing navigation, is the id. Oh, and the element if you are you're using something besides lists.
posted by Grod at 3:52 PM on July 24, 2004

Weston, your demo worked fine for me in firefox

Curiouser and curiouser. I'm using Firefox .8. What version were you looking at it in.

(and hey lewistate, good to see you post -- apparently Iowa flushes you out into MeFi? :)
posted by weston at 9:28 PM on July 24, 2004

Response by poster: Awesome. Thanks.
posted by Tlogmer at 12:19 AM on July 25, 2004

Weston, Firefox 0.9.1 . Worth the upgrade.
posted by Grod at 2:43 PM on July 25, 2004