H1閃爍而不是隱藏

所以我試圖構建一個六邊形佈局，我遵循代碼筆教程，它的工作原理非常好。然而，當我在div中放置一個H1時，我希望它在懸停時消失，但它只是一次又一次。大部分時間閃爍。H1閃爍而不是隱藏

下面

HTML和CSS代碼JS撥弄鏈接

<section id="lab"> 

    <article> 

     <div class="lab_item">  
     <div class="hexagon hexagon2"> 
      <div class="hexagon-in1"> 
       <div class="hexagon-in2" style="background-image: url(http://placekitten.com/200/320);"> 

        <h1 class="hoverheading">Test<br />Test</h1> 

       </div> 
      </div> 
     </div> 
     </div> 
      <div class="lab_item"> 
      <div class="hexagon hexagon2"> 
      <div class="hexagon-in1"> 
       <div class="hexagon-in2" style="background-image: url(http://placekitten.com/200/320);">     
       </div> 
      </div> 
     </div> 
     </div> 
<div class="lab_item"> 
      <div class="hexagon hexagon2"> 
      <div class="hexagon-in1"> 
       <div class="hexagon-in2" style="background-image: url(http://placekitten.com/200/310);">     
       </div> 
      </div> 
     </div> 
     </div> 
<div class="lab_item"> 
      <div class="hexagon hexagon2"> 
      <div class="hexagon-in1"> 
       <div class="hexagon-in2" style="background-image: url(http://placekitten.com/200/300);">     
       </div> 
      </div> 
     </div> 
     </div> 
       <div class="lab_item">   
     <div class="hexagon hexagon2"> 
      <div class="hexagon-in1"> 
       <div class="hexagon-in2" style="background-image: url(http://placekitten.com/300/300);">     
       </div> 
      </div> 
     </div> 
     </div> 
      <div class="lab_item"> 
      <div class="hexagon hexagon2"> 
      <div class="hexagon-in1"> 
       <div class="hexagon-in2" style="background-image: url(http://placekitten.com/300/400);">     
       </div> 
      </div> 
     </div> 
     </div> 
      <div class="lab_item"> 
      <div class="hexagon hexagon2"> 
      <div class="hexagon-in1"> 
       <div class="hexagon-in2" style="background-image: url(http://placekitten.com/500/500);">     
       </div> 
      </div> 
     </div> 
     </div> 
      <div class="lab_item"> 
      <div class="hexagon hexagon2"> 
      <div class="hexagon-in1"> 
       <div class="hexagon-in2" style="background-image: url(http://placekitten.com/600/600);">     
       </div> 
      </div> 
     </div> 
     </div> 
      <div class="lab_item"> 
      <div class="hexagon hexagon2"> 
      <div class="hexagon-in1"> 
       <div class="hexagon-in2" style="background-image: url(http://placekitten.com/700/700);">     
       </div> 
      </div> 
     </div> 
     </div> 
      <div class="lab_item"> 
      <div class="hexagon hexagon2"> 
      <div class="hexagon-in1"> 
       <div class="hexagon-in2" style="background-image: url(http://placekitten.com/250/300);">     
       </div> 
      </div> 
     </div> 
     </div> 




    </article> 
</section> 

<style type="text/css"> 

/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    /*display: block;*/ 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

#lab { 
    /*width: 1000px;*/ 
    overflow: hidden; 
    padding-bottom: 70px; 
    position: relative; 
    margin: 0 auto; 
    margin-bottom: 2.5em; 

    /*-webkit-transition: all ease 500ms; 
    -moz-transition: all ease 500ms; 
    -o-transition: all ease 500ms; 
    -ms-transition: all ease 500ms; 
    transition: all ease 500ms;*/ 
} 

h1 { 
    /*font-family: bebas_neueregular ,sans-serif; 
    font-size: 1.75em; 
    padding: 0.2em 0 0.2em 0.2em; 
    color: #000000; 
    text-shadow: 0 0.06em 0 #424242;*/ 
    position: relative; 

} 

#lab h1 { 
} 

#lab h1:hover { 
visibility: hidden; 
} 

#lab .hoverheading { 
    top: 140px; 
    /* left: 11px; */ 
    text-align: center; 
    vertical-align: center; 

} 

#lab .hoverheading:hover{ 
    visibility: hidden; 
} 

/*.beaker { 
    -webkit-filter: drop-shadow(#424242 0px 1px 0px); 
    border-bottom: 2em solid #FFF; 
    border-left: 1em solid transparent; 
    border-right: 1em solid transparent; 
    border-radius: .5em; 
    height: 0; 
    width: 1em; 
    position: absolute; 
    right: 0.7em; 
    bottom: 22%; 
    font-size: 0.6em; 
} 

.beaker::before { 
    border-left: .25em solid #FFF; 
    border-radius: .25em; 
    border-right: .25em solid #FFF; 
    content: ''; 
    height: .25em; 
    left: -.25em; 
    position: absolute; 
    top: -1em; 
    width: 1em; 
} 

.beaker::after { 
    border-left: .25em solid #FFF; 
    border-right: .25em solid #FFF; 
    content: ''; 
    height: 1em; 
    left: 0; 
    position: absolute; 
    top: -1em; 
    width: .5em; 
}*/ 

.sectionheader { 
    position: relative; 
} 

.lab_item { 
    width: 200px; 
    height: 230px; 
    position: relative; 
    display: inline-block; 
} 

.hexagon2 { 
    position: absolute; 
    width: 200px; 
    height: 400px; 
    top: -85px; 
} 

.hexagon { 
    overflow: hidden; 
    visibility: hidden; 

    -webkit-transform: rotate(120deg); 
    -moz-transform: rotate(120deg); 
    -o-transform: rotate(120deg); 
    -ms-transform: rotate(120deg); 
    transform: rotate(120deg); 
    cursor: pointer; 
} 

.hexagon-in1 { 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 

    -webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    -o-transform: rotate(-60deg); 
    -ms-transform: rotate(-60deg); 
    transform: rotate(-60deg); 
} 

.hexagon-in2 { 
    -webkit-box-shadow: inset 0 0 0 200px rgba(253, 242, 0, 1.00); 
    box-shadow: inset 0 0 0 200px rgba(253, 242, 0, 1.00); 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-position: 50%; 

    -webkit-background-size: 125%; 
    -moz-background-size: 125%; 
    background-size: 125%; 
    visibility: visible; 

    -webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    -o-transform: rotate(-60deg); 
    -ms-transform: rotate(-60deg); 
    transform: rotate(-60deg); 

    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

.hexagon-in2:hover { 
    -webkit-box-shadow: inset 0 0 0 0px #B0DAD4; 
    box-shadow: inset 0 0 0 0px #B0DAD4; 
} 

#lab article { 
    padding-top: 1em; 
    width: 820px; 
    margin: 0 auto; 
} 

.lab_item:nth-child(7n-2) { 
    margin-left: 101px; 
} 

.lab_item:nth-child(n+5) { 
    margin-top: -55px; 
} 

@media (max-width: 1015px) { 
    #lab { 
    width: 100%; 
} 

} 

@media (max-width: 820px) { 
    .lab_item:nth-child(5n-1) { 
    margin-left: 102px; 
} 

.lab_item:nth-child(n+4) { 
    margin-top: -62px; 
} 

.lab_item:nth-child(7n-2) { 
    margin-left: 0px; 
} 

.lab_item:nth-child(n+5) { 
    margin-top: -56px; 
} 

#lab article { 
    width: 610px; 
} 

} 

@media (max-width: 640px) { 
    #lab article { 
    width: 405px; 
} 

.lab_item:nth-child(5n-1) { 
    margin-left: 0px; 
} 

.lab_item:nth-child(3n) { 
    margin-left: 102px; 
} 

.lab_item:nth-child(n+3) { 
    margin-top: -56px; 
} 

} 

@media (max-width: 450px) { 
    #lab article { 
    width: 300px; 
} 

.lab_item:nth-child(3n) { 
    margin-left: 0px; 
} 

.lab_item:nth-child(2n) { 
    margin-left: 102px; 
} 

.lab_item:nth-child(n+2) { 
    margin-top: -56px; 
} 

} 

</style>

我無法弄清楚它閃爍和不正確地隱藏

你能指出我在正確的方向

謝謝

來源

2015-12-13 user2389087

您分配了兩次「visibility：hidden的; '有這種影響，這是你的正確方向..如果不成功，請@me :) –

如this回答中所述，如果visibility設置爲hidden，則:hover不起作用。另一種方法是將visiblity:hidden更改爲opacity:0，其中:hover確實繼續有效。它閃爍的原因之前是這樣的：

你上空盤旋，它消失
現在，它已經消失了，這不是上空盤旋了，並且重現
重複1

這裏是一個修正後的版本，當你將它懸停在標題上時，它就會隱藏：opacity:0：

http://jsfiddle.net/bcsz6whz/1/

來源

2015-12-13 18:16:03

這很快哈哈。但是當用戶懸停在整個容器上而不僅僅是文本上時，h1元素應該不會消失？ –

沒有線索。 OP將它設置爲在標題懸停時消失，所以我堅持這一點。我確實懷疑你可能是對的。在該說明中，在您的解決方案中，即使鼠標未超過六邊形，h1元素也會消失。：P –

你是對的！修正了我的答案。 –

這裏有一個工作液：

http://jsfiddle.net/bcsz6whz/4/

改變visibility:hidden;到不透明度設置。當您將鼠標懸停在其父元素.hexagon上時，我也會觸發它，以便在您將鼠標懸停在文本上時獲得效果。

.hexagon:hover h1{ 
    opacity: 0; 
}

說明：我認爲當你將鼠標懸停在您的h1標籤與visibility:hidden;就變成了「unhoverable」，所以效果消失。

來源

2015-12-13 18:17:10

我建議增加一個jQuery腳本：

$(document).ready(function() { 
    $("#certain-hexagonId").hover(function() { 
     $("#the-hexagones-h1-ID").hide(); 
    )}; 
});

希望這有助於！

您也可以使用（CSS）的opacity: 0代替visibility: hidden

來源

2015-12-13 18:18:14 FlipFloop

我不得不說，儘可能避免使用JavaScript解決方案，因爲在使用JS（尤其是jQuery）時通常會有顯着的性能提升。另一方面，將'visibility：hidden'更改爲'display：none'不能解決問題。 –

H1閃爍而不是隱藏

回答

相關問題