Question

对于新的网页设计，我制作了两个50％宽度的div，在悬停时滑过。当鼠标悬停在左侧时，滑动＆＃39; div，我想要正确的＆＃39; logo＆＃39; div隐藏（显示：无），反之亦然，但它只是不起作用。我在这里错过了什么？任何帮助将不胜感激！

＆＃13;

    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;
    }

＆＃13;

    <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>

＆＃13;

And here is the [JSFIDDLE][1]!

提前致谢！

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

Answer 1

那是因为你的CSS

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

永远不会有效，没有.logo＃right INSIDE你的.inner＃left：hover元素，它只包含一个.logo＃left。与另一个相同。

你必须重新考虑你的设计才能发挥作用，我不明白为什么你需要两个标志，为什么不只是有一个标志可以滑动一侧或另一侧？为什么要隐藏它们？

Answer 2

所以你的第一个问题是你有多个具有相同ID的元素。这会让事情变得混乱（并且无效），所以坚持使用唯一的ID。

其次，CSS的局限性在于只能影响规则中的元素，该元素之后的兄弟元素或该元素的子元素。这意味着如果你想坚持使用纯CSS，那么你需要稍微有点笨拙。

如果你想使用javascript / jQuery，它基本上是一个单行修复。

如果您想坚持使用纯HTML + CSS，您可以使用兄弟选择器~来匹配另一张幻灯片。试试这个：

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

当您按照预期悬停右侧时，您会看到左侧隐藏！但是，相反的做法不起作用:(这是因为左边的元素位于标记的右边。但是，你可以“作弊”并在左侧添加一个隐藏的“触发器”。如果你添加一个元素<在 .slide#right之前的em> .slide#left的大小和形状完全相同，然后添加与此处相同的规则，但将#right替换为#lefttrigger它应该工作。

这有意义吗？

在悬停时隐藏div的问题

2 个答案: