problems with hiding div on hover

Question

For a new webdesign I made two 50% width div's that slide over on hover. When hovering on the left 'slide' div, I want the right 'logo' div to hide (display:none) and vice versa, but it just won't work. What am I missing here? Any help would be much appreciated!

    body {
        background:black;
    }
    .slide {
        position:absolute;
        top:0;
        bottom:0;
        width:50%;
        -webkit-transform:skew(-15deg);
        -moz-transform:skew(-15deg);
        -ms-transform:skew(-15deg);
        -o-transform:skew(-15deg);
        transform:skew(-15deg);
        z-index:2;
    }
    .slide:hover {
        width:60%;
        z-index:80;
    }
    .slide#left {
        left:0;
    }
    .slide#right {
        right:0;
    }
    .wrap {
        width:100%;
        height:100%;
        position:absolute;
        overflow:hidden;
        z-index:2;
    }
    .inner {
        width:100%;
        height:100%;
        -webkit-transform:skew(15deg) scale(1.5);
        -moz-transform:skew(15deg) scale(1.5);
        -ms-transform:skew(15deg) scale(1.5);
        -0-transform:skew(15deg) scale(1.5);
        transform:skew(15deg) scale(1.5);
        opacity:0.6;
        position:absolute;
    }
    .slide:hover .inner {
        opacity:0.9;
    }
    .inner#left {
        background:url(//savado.nl/new/key.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -ms-background-size:cover;
        -o-background-size:cover;
        background-size:cover;
    }
    .inner#right {
        background:url(//savado.nl/new/code2.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -ms-background-size:cover;
        -o-background-size:cover;
        background-size:cover;
    }
    .inner#left:hover .logo#right {
        display:none;
    }
    .inner#right:hover .logo#left {
        display:none;
    }
    .slide .logo {
        position:absolute;
        z-index:99;
        top:50%;
        height:30%;
    }
    .logo img {
        height:100%;
    }
    .logo#left {
        right:0;
        -webkit-transform:translateX(50%) translateY(-50%) skew(15deg);
        -moz-transform:translateX(50%) translateY(-50%) skew(15deg);
        -ms-transform:translateX(50%) translateY(-50%) skew(15deg);
        -o-transform:translateX(50%) translateY(-50%) skew(15deg);
        transform:translateX(50%) translateY(-50%) skew(15deg);
    }
    .logo#right {
        left:0;
        -webkit-transform:translateX(-50%) translateY(-50%) skew(15deg);
        -moz-transform:translateX(-50%) translateY(-50%) skew(15deg);
        -ms-transform:translateX(-50%) translateY(-50%) skew(15deg);
        -o-transform:translateX(-50%) translateY(-50%) skew(15deg);
        transform:translateX(-50%) translateY(-50%) skew(15deg);
    }
    div {
        -webkit-transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s ease;
        -moz-transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s ease;
        -ms-transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s ease;
        -o-transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s ease;
        transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s ease;
    }

    <div class='slide' id='right'>
        <div class='wrap'>
            <div class='inner' id='right'></div>
        </div>
        <div class='logo' id='right'>
            <img src='//savado.nl/new/logo.png' />
        </div>
    </div>
    <div class='slide' id='left'>
        <div class='wrap'>
            <div class='inner' id='left'></div>
        </div>
        <div class='logo' id='left'>
            <img src='//savado.nl/new/logo.png' />
        </div>
    </div>

And here is the [JSFIDDLE][1]!

Thanks in advance!

  [1]: http://jsfiddle.net/NZXeT/

".inner#left:hover .logo#right" won't work." Easier to fix with Jquery. — Nabbit, Jul 23 '14 at 18:25
Problem is that using `hover` to affect other elements is limited to "inner" or "next to". See http://stackoverflow.com/a/4502693/335905 — celerno, Jul 23 '14 at 18:33
you could also change `.slide:hover .inner` to have `opacity: 1;` — hannah, Jul 23 '14 at 18:46

score 1 · Accepted Answer · answered Jul 23 '14 at 20:26

That is because your CSS

.inner#left:hover .logo#right {
  display:none;
}
.inner#right:hover .logo#left {
  display:none;
}

Will never be valid, there is no .logo#right INSIDE your .inner#left:hover element, it only contains a .logo#left. The same with the other.

You will have to re-think your design for this to work, I do not see why you need two logo's, why not just have one logo that slides one side or the other? Why have to hide them?

score 0 · Answer 2 · answered Jul 23 '14 at 20:20

So your first issue is that you have multiple elements with the same ID. That's going to make things confusing (and invalid), so stick with unique IDs.

Second, CSS has the limitation of only being able to affect the element in the rule, siblings after that element, or children of that element. This means that if you want to stick with pure CSS you're going to need to get slightly hacky.

If you want to use javascript/jQuery, it's basically a one-liner fix.

If you want to stick with pure HTML+CSS you can use the sibling selector ~ to match the other slide. Try this:

.slide#right:hover ~ .slide#left {display: none;}

You'll see the left side hide when you hover the right just like intended! However, doing the opposite won't work :( This is because the left element is after the right in the markup. However, you can "cheat" and add a hidden "trigger" over the left side. If you add an element before .slide#right that is exactly the same size and shape of .slide#left, then add the same rule as I have here but replace #right with #lefttrigger it should work.

Does that make sense?

problems with hiding div on hover

2 Answers2