Question

有这个html：

<!DOCTYPE html>
<html>
    <head>
    <title>Image hover</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <style>
    .gecoitems {list-style-type: none !important;margin:0 auto !important;width:1200px;}
    .gecoitems .gecoitem {margin-bottom:20px;display:block;}
    .gecoitems .column {float:left;}
    .gecoitems {width:1200px;}
    .gecoitems .gecoitem.normal {width:1200px;height:252px;background:#006505;color:#fff;}

    /* links */
    .gecoitems .gecoitem:hover {opacity:1;}
    .image-listitem-wrapper {position:relative;}
    .image-listitem-wrapper .title {position:absolute;top:40%;left:0;opacity:1.0;color:#ffffff;text-transform: uppercase;width:100%;text-align:center;font-size:35px;line-height:normal;}
    .image-listitem-wrapper .title.hover {display:none;color:#000000;top:35%;}
    .image-listitem-wrapper .title.hover .services {text-transform: lowercase;display:block;}

    .gecoitems .gecoitem.wrapper-title.hover:hover {opacity:0.4;}
    .gecoitems .gecoitem.wrapper-title.hover:hover + .title.hover {display:block;}


    .slow-fade {
       opacity: 0.8;
        -webkit-transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -o-transition: opacity .25s ease-in-out;
        transition: opacity .25s ease-in-out;    
       }

        </style>

    </head>
    <body>
        <ul class="gecoitems">
            <li>
        <div class="image-listitem-wrapper default-image">
            <a href="#" class="wrapper-title hover slow-fade gecoitem normal"></a>
            <span class="title hover">TITLE<span class="services">Subtitle</span></span>
        </div>
            </li>
        </ul>
    </body>
</html>

我几乎得到了我想要的东西。当我悬停在该区域时，我得到不透明度0.4背景，上面有一个标题，但当我悬停标题/副标题时，我得到一个“闪烁效果”。我不想要这个“闪烁效果”。我怎么摆脱它？（我很确定就是这样：

.gecoitems .gecoitem.wrapper-title.hover:hover + .title.hover {display:block;}这是问题，但我该如何解决？当我悬停标题时，我不希望任何顶级事件发生（只是希望不透明度0.4“留在那里”）

JS小提琴进一步解释：https://jsfiddle.net/1rLzeht9/

Answer 1

您可以尝试以下代码段，我将部分display:block更改为opacity:1，并将z-index属性添加到.title

此外，为了这个片段的目的，我移动了你的css，摆脱了身体，meta等标签

.gecoitems {
  list-style-type: none !important;
  margin: 0 auto !important;
  width: 1200px;
}
.gecoitems .gecoitem {
  margin-bottom: 20px;
  display: block;
}
.gecoitems .column {
  float: left;
}
.gecoitems {
  width: 1200px;
}
.gecoitems .gecoitem.normal {
  width: 1200px;
  height: 252px;
  background: #006505;
  color: #fff;
}
/* links */

.gecoitems .gecoitem:hover {
  opacity: 1;
}
.image-listitem-wrapper {
  position: relative;
}
.image-listitem-wrapper .title {
  position: absolute;
  top: 40%;
  left: 0;
  opacity: 1.0;
  color: #ffffff;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  font-size: 35px;
  line-height: normal;
  z-index:-1;
}
.image-listitem-wrapper .title.hover {
  opacity: 0;
  color: #000000;
  top: 35%;
}
.image-listitem-wrapper .title.hover .services {
  text-transform: lowercase;
  display: block;
}
.gecoitems .gecoitem.wrapper-title.hover:hover {
  opacity: 0.4;
}
.gecoitems .gecoitem.wrapper-title.hover:hover + .title.hover {
  opacity: 1;
}
.title:hover {
  opacity: 1 !important;
}
.slow-fade {
  opacity: 0.8;
  -webkit-transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
}

<body>
  <ul class="gecoitems">
    <li>
      <div class="image-listitem-wrapper default-image">
        <a href="#" class="wrapper-title hover slow-fade gecoitem normal"></a>
        <span class="title hover">TITLE<span class="services">Subtitle</span></span>
      </div>
    </li>
  </ul>
</body>

您也可以将pointer-events:none添加到.title元素，请参阅This Fiddle。这将删除标题作为鼠标事件的目标

Answer 2

你的问题是，因为.title.hover不在.wrapper-title内，所以当鼠标移过.title时你会丢失：hover选择器，因此该元素会被隐藏，再次将鼠标悬停在包装器，等等。

您可以通过将pointer-events: none设置为标题来避免这种情况。

https://developer.mozilla.org/es/docs/Web/CSS/pointer-events

悬停标题时的闪烁效果。不透明背景的标题

2 个答案: