Изображение при наведении перекрывает липкий заголовок - PullRequest
Новая
       25

Изображение при наведении перекрывает липкий заголовок

2 голосов
/ 11 февраля 2020

У меня есть сетка, в которой изображения являются ссылками на статьи, и когда изображения наведены, они становятся немного темнее, но если в это время над ними находится липкий заголовок, при наведении на них заголовок перекрывается. Я пробовал с z-index, но это не работает.

Есть ли способ исправить это, кроме как сделать заголовок фиксированным, потому что у меня есть некоторая информация выше заголовка с lo go и ссылками, и переключение изображений с такими же, но более темными версиями в то время как зависание не выглядит элегантным решением.

Изображение:

enter image description here

header {
  background-color: red;
  padding: 10px;
  position: sticky;
  top: 0;
}

.test {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  margin: 50px;
}

.test1 {
  grid-column: 1 / 3;
  background-color: yellow;
}

.test2 {
  grid-column: 1 / 2;
  background-color: blue;
}

.test3 {
  grid-column: 2 / 3;
  background-color: green;
}

.image:hover {
  filter: brightness(0.8);
}
    <p>To make header sticky</p><br>
    <p>To make header sticky</p><br>
    
    <header>
      <p>
        Sticky header Sticky header Sticky header Sticky header
      </p>
    </header>
    
    
    
    <div class="test">
    
      <div class="test1">
        TEST1
      </div>
    
    
      <div class="test2 image">
        IMAGE1
      </div>
    
    
      <div class="test3 image">
        IMAGE2
      </div>
    
    </div>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

1 Ответ

1 голос
/ 11 февраля 2020

Добавить z-index к заголовку. 

header {
  background-color: red;
  padding: 10px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.test {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  margin: 50px;
}

.test1 {
  grid-column: 1 / 3;
  background-color: yellow;
}

.test2 {
  grid-column: 1 / 2;
  background-color: blue;
}

.test3 {
  grid-column: 2 / 3;
  background-color: green;
}

.image:hover {
  filter: brightness(0.8);
}
<p>To make header sticky</p><br>
    <p>To make header sticky</p><br>
    
    <header>
      <p>
        Sticky header Sticky header Sticky header Sticky header
      </p>
    </header>
    
    
    
    <div class="test">
    
      <div class="test1">
        TEST1
      </div>
    
    
      <div class="test2 image">
        IMAGE1
      </div>
    
    
      <div class="test3 image">
        IMAGE2
      </div>
    
    </div>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
...