Перемещение непрозрачности при наведении курсора CSS при наведении на элемент, находящийся поверх другого элемента - PullRequest
Новая
       22

Перемещение непрозрачности при наведении курсора CSS при наведении на элемент, находящийся поверх другого элемента

0 голосов
/ 02 февраля 2019

У меня есть обложка альбома, на которой также есть кнопка воспроизведения.

Когда пользователь наводит курсор на обложку альбома, непрозрачность меняется, чтобы осветлить изображение.Аналогично, при наведении курсора на обложку, если пользователь затем наводит курсор на кнопку воспроизведения, непрозрачность обложки должна оставаться в ее измененном состоянии.

Проблема заключается в том, что из-за эффекта перехода на непрозрачность, непрозрачностьмерцает при наведении назад и вперед на обложку и кнопку воспроизведения.

Я создал скрипку, чтобы показать проблему.

Как это сделать, чтобы при первом наведении курсора на обложку альбоманепрозрачность изменяется, но затем, надвигаясь на кнопку воспроизведения, непрозрачность остается неизменной без повторного перехода, вызывая ее мерцание? 

.play-button-container img:hover,
.play-button:hover + .image {
    opacity: .6;
}

.play-button-container img {
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

.play-button {
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 30px;
    color: #fff;
    z-index: 1000;
    background-color: red;
}
<div class="image-container">
  <div class="play-button-container">
  
    <div class="play-button">
      PLAY
    </div>
    
    <div class="image">
      <img src="http://papers.co/wallpaper/papers.co-am19-tycho-art-music-album-cover-illust-simple-white-40-wallpaper.jpg" width="350">
    </div>
    
  </div>
</div>

https://jsfiddle.net/659z2ndx/1/

1 Ответ

0 голосов
/ 02 февраля 2019

Когда вы наводите курсор на кнопку воспроизведения, вы изменяете непрозрачность div с помощью класса image.Это то, что вызывает мерцание.

Что вам нужно сделать, это изменить непрозрачность img

.play-button-container img:hover,
.play-button:hover + .image > img {
   opacity: .6;
}

.play-button-container img {
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

.play-button {
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 30px;
    color: #fff;
    z-index: 1000;
    background-color: red;
}
<div class="image-container">
  <div class="play-button-container">
  
    <div class="play-button">
      PLAY
    </div>
    
    <div class="image">
      <img src="http://papers.co/wallpaper/papers.co-am19-tycho-art-music-album-cover-illust-simple-white-40-wallpaper.jpg" width="350">
    </div>
    
  </div>
</div>
...