SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css menu with expandable drop shadow - problem hovering

    Hello

    I would like to know if there is a way to use the :hover event to change a "parent" selector. For example, I have some markup here.

    HTML Code:
    <div id="firstLayer">
       <div id="secondLayer">
           <a href="#nogo">Yeah</a>
       </div>
    </div>
    and this style is applied to this markup

    Code:
    #firstLayer
    {
        background: #fff url('thatimage.png') top right no-repeat;
    }
    #secondLayer
    {
        background: #fff url('thisimage.png') top right repeat-y;
    }
    a:hover
    {
        /*Here is the problem area*/
    }
    Is there a way in the /*problem area*/ I could use to reach the #firstLayer and #secondLayer and change their propreties??? (In other words, I want to change solely the background color from #fff to let's say #000 and keep the background images on the top)

    Thanks

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Slightly confused, but I think you're trying to target #firstLayer and #secondLayer individualy?

    If so, do it like this:
    Code:
    #firstLayer a:hover {
    /* firstLayer anchor hover properties here */
    }
    
    #secondLayer a:hover {
    /* secondLayer anchor hover properties here */
    }
    Correct me if that is not what you're looking for at all..
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't work. The two divs are overlapping. Seems like I can only adress the style to only one of these divs.

    I will explain the principle better.


    This is the markup. Two boxes wrapped around a link.

    HTML Code:
    <div id="firstLayer">
       <div id="secondLayer">
           <a href="#nogo">Yeah</a>
       </div>
    </div>
    This is the style. A background image for each one of the boxes.

    Code:
    #firstLayer{
    background: #fff url('thisimage.png') top right repeat-y;
    }
    #secondLayer{
    background:url('thatimage.png') top right no-repeat;
    }
    #firstLayer a:hover{
    background: #000 url('thisimage.png') top right repeat-y;
    }
    Ok I figured it out, I can put a :hover property on a div box, which is very smart. TOught it only worked on links.

    This is my final, corrected style:

    Code:
    #firstLayer{
    background: #fff url('thisimage.png') top right repeat-y;
    }
    #secondLayer{
    background:url('thatimage.png') top right no-repeat;
    }
    #firstLayer:hover{
    background: #000 url('thisimage.png') top right repeat-y;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •