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闪烁而不是隐藏

回答

相关问题