Multi hover

Discussion in 'CSS' started by ellias2007, Jan 10, 2011.

  1. #1
    Hi every body,
    i have i simple square div : A
    with 3 other small divs : x, y and z
    i want when i hover x or y or z the Photo in the div A CHANGES ...
    in order to do that (Without using Java Script : Only Html + css), i think about using the normal hover, but this time with partitionning the area over witch the mouse hover ...
    suppose that we have an area divided with horizontal and vertical axes ... and we want that each time the mouse hover some part, the effect occures in some div ...

    Can i do that without JS (html + css)
    Thanks to any usefull help
     
    ellias2007, Jan 10, 2011 IP
  2. tolra

    tolra Active Member

    Messages:
    515
    Likes Received:
    36
    Best Answers:
    1
    Trophy Points:
    80
    #2
    http://paul.arlott.me/ex/rollover/ shows what you're after or at least a way of achieving it. I've put all the CSS in the HTML to make it easier for you to see all the information.
     
    tolra, Jan 10, 2011 IP
    Dodger likes this.
  3. ellias2007

    ellias2007 Greenhorn

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    Many Thanks Tolra ...
    Really Perfect ....
    i don't know if i can rate your answer here in this forum ...
    Thanks Again
     
    ellias2007, Jan 19, 2011 IP
  4. tolra

    tolra Active Member

    Messages:
    515
    Likes Received:
    36
    Best Answers:
    1
    Trophy Points:
    80
    #4
    you're most welcome, good luck with the site :)
     
    tolra, Jan 19, 2011 IP
  5. ellias2007

    ellias2007 Greenhorn

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    Oh ... Tolra, a simple additionnal thing :
    Your code works pefectly But it does Not contain a default gif ...
    in other words, i want that if the user remove the mouse from the divs x, y, z, ... a Default gif appears on the div A, and when the user hover x, y, z ... the others gifs appears ..
    Please note that the gifs may contain Transparency, that means that we can not put them on top of the Default gif without removing this last one..
    Many thanks to any help...
     
    ellias2007, Jan 25, 2011 IP
  6. tolra

    tolra Active Member

    Messages:
    515
    Likes Received:
    36
    Best Answers:
    1
    Trophy Points:
    80
    #6
    Put a default image on the .container class, then for each hover add another element e.g. <b></b> before the <span>, now you can set the b to be a white or other colour area which goes over the default image and the span gets positioned over it so that transparency in the hover image shows the white area rather than the underlying image.

    Not actually tried it but should work just fine.
     
    tolra, Jan 25, 2011 IP