CSS: кнопка при наведении курсора не работает в уже зависшем div - PullRequest
Новая
       76

CSS: кнопка при наведении курсора не работает в уже зависшем div

0 голосов
/ 20 июня 2020

У меня есть div, появляющийся поверх изображения, когда я наводю курсор на само изображение. Div содержит два div (кнопки), которые также имеют: hover, который меняет свой цвет и устанавливает курсор на указатель.

Проблема в том, что при наведении курсора на кнопку не запускается наведение.

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

//HTML
 <div class="container">
  <img src="src">
  <div class="btn_container">
    <div class=" btn">
      <p>Select</p>
    </div>
    <div class="btn">
      <p>Preview</p>
    </div>
  </div>
      
//SCSS
.container {
  position: relative;
  width: 100%;
  img {
    width: 100%;
    height: auto;
  }

  .btn_container {
    position: absolute;
    width: 100%;
    height: 40px;
    background-color: var(--dark-purple-trans);
    bottom: 0;
    left: 0;
    align-items: center;
    display: none;
    position: absolute;
  }
  img:hover + .btn_container,
  .btn_container > * {
    display: flex;
    border: none;
    text-align: center;
    justify-content: space-around;
  }

  .btn {
    padding: 6px 12px;
    height: 14px;
    background: var(--yellow-medium);
    border-radius: 8px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: var(--white);
    font-family: roboto;
    &:hover {
      cursor: pointer;
      background: var(--red);
      color: var(--white);
    }
  }
}

Предварительный просмотр, при наведении кнопки не работает:

enter image description here

If I force the hover on the img using the inspector, the button hovering seems to work:

введите описание изображения здесь

Ответы [ 2 ]

1 голос
/ 20 июня 2020

Я попытался использовать непрозрачность вместо отображения для переключения видимости btn_container и добавил наведение на btn_container, и, похоже, это сработало: https://jsfiddle.net/pr8dxe2g/1/

  .btn_container {
    width: 500px;
    height: 100px;
    background-color: var(--dark-purple-trans);
    bottom: 0;
    left: 0;
    align-items: center;
    opacity: 0;
    position: absolute;
  }

  img:hover + .btn_container,
  .btn_container:hover,
  .btn_container > * {
    display: flex;
    opacity: 1;
    border: 1px solid blue;
    text-align: center;
    justify-content: space-around;
  }

Могут быть некоторые проблема с вашим текущим кодом из-за того, что div img имеет более высокий порядок стека, если изначально для отображения установлено значение none, однако я не уверен, поэтому, если кто-нибудь знает, я хотел бы знать, почему это так.

1 голос
/ 20 июня 2020

Проблема в классах img:hover + .btn_container и .btn_container > *.

Вот обновленный s css: 

.container {
  position: relative;
  width: 100%;

  img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
  }

  &:hover .btn_container {
    display: flex;
  }

  .btn_container {
    position: absolute;
    bottom: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 40px;
    text-align: center;
    background-color: var(--dark-purple-trans);
    border: none;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 14px;
    padding: 6px 12px;
    color: var(--white);
    font-family: roboto;
    background-color: var(--yellow-medium);
    border-radius: 8px;
    cursor: pointer;

    &:hover {
      color: var(--white);
      background-color: var(--red);
    }
  }
}

Посмотреть его в действии можно здесь: Codepen

...