Question

所以我试图建立一个六边形布局，我遵循了一个代码笔教程，它很有效。然而，当我在div中放置H1时，我希望它在悬停时消失，它只是一次又一次地这样做。大多数时候它都会闪烁。

JS小提琴链接

HTML和CSS代码

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

我无法弄清楚它是不是闪烁而且没有正确隐藏

你能指出我正确的方向

由于

Answer 1

正如this回答中所述，如果:hover设置为visibility，则hidden无效。另一种方法是将visiblity:hidden更改为opacity:0，其中:hover会继续有效。之前它闪烁的原因是：

你在它上面盘旋，它消失了
现在已经消失了，它不再徘徊，重新出现
从1

以下是使用opacity:0将鼠标悬停在标题上时隐藏标题的更正版本：

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

Answer 2

这是一个工作解决方案：

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

将visibility:hidden;更改为不透明度设置。当你将鼠标悬停在其父元素.hexagon上时，我也会触发它，以便不仅在将鼠标悬停在文本上时获得效果。

.hexagon:hover h1{
  opacity: 0;
}

说明：我认为当您将h1标记悬停在visibility:hidden;上时，它会变得“无法移动”，因此效果会消失。

Answer 3

我建议添加一个jQuery脚本：

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

希望这有帮助！

您还可以使用（代表CSS）opacity: 0代替visibility: hidden

H1闪烁而不是隐藏

3 个答案: