在懸停時隱藏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的問題

回答

相關問題