CSS hovers and mouseovers

Discussion in 'Web Design and Development' started by Sdashiki, Jan 19, 2007.

  1. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #1
    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?
     
  2. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #2
    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.
     
  3. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #3
    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?

    test.jpg
     
  4. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #4
    the only practical way to do that is with javascript. seems very 1998 personally.
     
  5. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #5
    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.
     
  6. spoonfactory macrumors newbie

    Joined:
    Jan 19, 2007
    #6
  7. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #7
    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.
     
  8. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #9
    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...?
     
  9. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #10
    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.
     

Share This Page