在悬停时隐藏div的问题

对于新的网页设计，我制作了两个在悬停时滑过的50％div div。当鼠标悬停在左侧的“幻灯片”div上时，我想要右侧的“logo”div隐藏（显示：无），反之亦然，但它不起作用。我在这里错过了什么？任何帮助将非常感激！在悬停时隐藏div的问题

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

提前感谢！

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

来源

2014-07-23 Savado

“.inner＃left：hover .logo＃right”will not work。“更容易使用Jquery解决 – Nabbit

问题是使用'hover'来影响其他元素仅限于”inner“或”next to“ 请参阅http://stackoverflow.com/a/4502693/335905 – celerno

您也可以将'.slide：hover .inner'改为'opacity：1;' – hannah

那是因为你的CSS

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

将永远无效，没有.logo＃right在.inner＃left：hover元素的内部，它只包含一个.logo＃左侧。与其他相同。

您将不得不重新考虑您的设计以使其工作，我不明白为什么您需要两个标志，为什么不只有一个标志滑动一侧或另一侧？为什么要隐藏它们？

来源

2014-07-23 20:26:47 Lochemage

所以你的第一个问题是你有多个具有相同ID的元素。这会让事情变得混乱（和无效），所以坚持使用唯一的ID。其次，CSS只有能够影响规则中元素，该元素之后的同胞或该元素的子元素的限制。这意味着如果你想坚持纯粹的CSS，你将需要变得有点黑客。

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

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

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

你会看到左侧隐藏，当你把鼠标悬停在右边就像意图一样！然而，相反的做法是行不通的:(这是因为左边的元素在标记右边后面，然而，你可以“欺骗”并在左边添加一个隐藏的“触发器”，如果你添加一个元素前.slide#right是完全相同的大小和.slide#left形状，然后添加相同的规则来我这里，但与#lefttrigger取代#right它应该工作。

这是否有意义？

来源

2014-07-23 20:20:22 Khan

在悬停时隐藏div的问题

回答

相关问题