Эффект мерцания при наведении курсора мыши на заголовок. Заголовок поверх фона непрозрачности

ProgramBox

Эффект мерцания при наведении курсора мыши на заголовок. Заголовок поверх фона непрозрачности

Post author:admin
Запись опубликована:20 февраля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Имея этот 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 /

Ответ №1:

Вы можете попробовать следующий фрагмент, я изменил некоторые значения display:block opacity:1 и добавил свойство z-index в .title

Также я переместил ваш css, избавился от тегов body, 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 элементу, см. Эту скрипку. Это удаляет заголовок, являющийся целью событий мыши

Ответ №2:

Ваша проблема в том, что, поскольку .title.hover is not inside .wrapper-title , вы теряете селектор:hover при наведении курсора .title мыши, поэтому элемент скрывается, что снова приводит к наведению курсора на оболочку и так далее.

Этого можно избежать, установив значение pointer-events: none для заголовка.

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

1. да .. К счастью, меня не волнует IE, я говорю, что никому не должно быть дела, но хорошо .. это реальный мир..

2. Другим людям не все равно. Если вы хотите, чтобы это было частью серьезного веб-сайта. Необходимо учитывать IE.

3. Я знаю, что другим людям не все равно, и именно поэтому у нас все еще есть некоторые проекты, в которых ie 8 должен поддерживаться. В любом случае, мой комментарий был больше направлен на «Меня не волнуют старые версии». Кстати, какую версию ie, по вашему мнению, следует учитывать?

4. Я согласен. по крайней мере, ie8