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

Question

Having this html: 有这个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>

I get almost what I want. 我几乎得到了我想要的。 When I hover the area I get opacity 0.4 background with a title above, but when I hover the title/subtitle I get a "flickering effect".I dont want this "flickering effect". 当我将鼠标悬停在该区域上时，会得到不透明的0.4背景，上面有一个标题，但是当我将标题/副标题悬停时，我会得到“闪烁效果”。我不希望这种“闪烁效果”。 How do I get rid of that? 我该如何摆脱呢？ (I'm quite sure it's this: （我很确定是这样的：

.gecoitems .gecoitem.wrapper-title.hover:hover + .title.hover {display:block;} that's the issue but how do I solve this? .gecoitems .gecoitem.wrapper-title.hover:hover + .title.hover {display:block;}这就是问题所在，但是我该如何解决呢？ I don't want anything top happen when I hover the title (just want the opacity 0.4 to "stay there") 悬停标题时，我不希望发生任何事情（只希望不透明度0.4保持在该位置）

A JS Fiddle to explain further: https://jsfiddle.net/1rLzeht9/ JS小提琴进一步解释： https : //jsfiddle.net/1rLzeht9/

Answer 1

You can try the following snippet, I changed some of the display:block to opacity:1 , and added a z-index property to the .title 您可以尝试以下代码段，我将一些display:block更改为opacity:1 ，并在.title添加了z-index属性

Also I moved your css, got rid of the body, meta etc tags for the purpose of this snippet 我也移动了你的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>

You may also add pointer-events:none to the .title element, see This Fiddle . 您还可以在.title元素中添加pointer-events:none ，请参见This Fiddle 。 This removes the title being the target of mouse events 这将删除标题作为鼠标事件的目标

Answer 2

Your problem is that since .title.hover is not inside .wrapper-title you lose the :hover selector when the mouse goes over .title , therefore the element is hiden, bringing again the hover to the wrapper, and so on. 您的问题是，由于.title.hover不在.wrapper-title内，因此当鼠标悬停在.title ，您会失去：hover选择器，因此该元素被隐藏了，再次将鼠标悬停在包装上，依此类推。

You can avoid that by setting pointer-events: none to the title. 您可以通过将pointer-events: none设置为标题来避免这种情况。

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

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-10-18 05:20:49

解决方案2
2 2016-10-18 05:27:09

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-10-18 05:20:49

解决方案2 2 2016-10-18 05:27:09

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

解决方案1
2 已采纳 2016-10-18 05:20:49

解决方案2
2 2016-10-18 05:27:09