#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    1
    Rep Power
    0

    CSS Hover Div1 effects Div2


    Goal: When use hovers over Div1, Div2 is activated.

    Here is my HTML:

    <div id="images"></div><div id="box"></div></div>

    Here is my CSS:

    #box {
    width:100px;
    height:100px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #333;
    }
    #box:hover{
    width:100px;
    height:100px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #999;
    }
    #images {
    background: url('image');
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: slideshow 0s linear infinite;
    -moz-animation: slideshow 00s linear infinite;
    }
    @-webkit-keyframes slideshow {
    0% { left: 0; }
    100% { left: -200%; }
    }
    @moz-keyframes slideshow {
    0% { left: 0; }
    100% { left: -200%; }
    }
    }
    #box:hover + #images {
    background: url('image');
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: slideshow 20s linear infinite;
    -moz-animation: slideshow 20s linear infinite;
    }
    @-webkit-keyframes slideshow {
    0% { left: 0; }
    100% { left: -200%; }
    }
    @moz-keyframes slideshow {
    0% { left: 0; }
    100% { left: -200%; }
    }
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Welcome to DevShed Forums, JIMMYCSS.

    The adjacent sibling combinator, "+", (and the general sibling combinator, "~", also) only works if the selector that precedes it is for the element that precedes the element matched be the selector that succeeds it.

    Since you're using some absolute positioning anyway, just reverse the order of the two elements in your markup.

    P.S. When posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo