Grow your CSS skills. Land your dream job.

change display on hover

  • # May 2, 2013 at 8:20 pm

    #right
    {
    position:absolute;
    top: 287.5px;
    right: 127px;
    z-index: 99;
    display:none;
    }
    #left
    {
    position:absolute;
    top: 287.5px;
    left: 127px;
    z-index: 99;
    display:none;
    }

    #slide1:hover ~ #left
    {
    display:block;
    }

    `

    `

    ``
    ``
    `

    `

    I want to change the display property of left and right id’s on hover of id slide1.

    # May 2, 2013 at 8:28 pm

    `~` is a sibling selector, it’s hard to say if that’s what you need without seeing your markup. But I guess you would need to change that to `#slide1:hover #left`.

    # May 3, 2013 at 6:21 am

    Code was there…I’ve hacked the post about to get it to show.

    `#slide1:hover #left` would work

    as would

    `#slide1:hover > #left`… I think.

    http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".