CSS hovers and mouseovers

[Sdashiki]

Im having trouble figuring this one out, so tell me if im crazy to even be trying:

I have an image. I have some text.

I want the text to be styled the same whenever you hover over the text OR the image.



imagine a list of artists in 2 columns...

when you hover over the names, they change as they should to let you know you can click.

imagine a group of pics underneath the list of artists...

when you hover over the image that pertains to a certain artist, the artist's name in text is changed the same as if the user had hovered over the text.


does this make cents?

 

[pengu]

use one image for each item. put the image and a span with the text in it inside a single anchor, and use CSS to style the text how u want during "normal" and "hover" states.

 

[Sdashiki]

i am not sure that is how I can solve this, here is a quick shot and mockup of what i mean.

id like the text to turn white on hover (easy and pretty standard)

but i also want the same text to turn white when you hover over an image below. one image to one artist.

make cents?

 

[pengu]

the only practical way to do that is with javascript. seems very 1998 personally.

 

[Sdashiki]

well i just wanted to add some pinache to that page, and I thought adding an album cover for each artist would be appropriate.

otherwise the space below is just empty.

and it would be nice to be able to hover the album art and know which artist it corresponds to.

no JS on my site. none.

 

[spoonfactory]

You can do it with css

You need to google for "Disjointed CSS rollovers". Try this link- http://pmob.co.uk/pob/disjointed1.htm

 

[Sdashiki]

You need to google for "Disjointed CSS rollovers". Try this link- http://pmob.co.uk/pob/disjointed1.htm

ive done this already on my site.

refer to the above posted pic:

same layout only the text area is blank normally.

hover over the thumbnail, the larger image appears where the text is on the above posted image.


in this case id be looking to have the hover affect the style of some text elsewhere on the page. and its looking as though this is not possible with css alone.

 

[spoonfactory]

Or another example

These are a little more like what you're trying to do:

http://www.tjkdesign.com/articles/css%20pop%20ups/3.asp

http://meyerweb.com/eric/css/edge/popups/demo.html

 

[Sdashiki]

close, but with those, as I know already from using this for my thumbnail galleries, it always puts the hover image/text in the same spot.

id have to define each of the positions of the text as a .class so that when you hover over one it doesnt simply produce the hover in the same spot for every artist.

thats alot more coding than id need to be doing, which means its not an efficient way.

im thinking of other ways to do this, but maybe not in the same way.

like just have the name of the artist show up underneath the album art...?

 

[pengu]

why dont you put a smaller version of the band's logo or image or whatever it is, with the link, at least then it will also be a more visual link between the two for visitors.