Hover и before не появляется градиент, помогите пожалуйста

Рейтинг: 0Ответов: 2Опубликовано: 19.03.2023

html

.poginatione {
  text-align: center;
}

.screen-reader-texte {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
}

.poginatione .nav-linkse {
  margin-bottom: 30px;
}

.web.current {
  box-shadow: inset 0 0 0 1px #ced4da;
  color: #666;
}

.nave-links .web {
  padding: 0.7em 1em;
  position: relative;
  margin: 0 0.3em;
  text-decoration: none;
}

.paginatione .nav-linkse .web:not(.dots):not(.current):before {
  background-color: #7f8ee0;
  top: 100%;
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 20%, rgba(255, 34, 21, 0.5) 100%);
  transition: 0.3s;
}

.pagination .nav-linkse:hover .web::before {
  top: 0%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" type="text/css" rel="stylesheet">
  <title>Document</title>
</head>

<body>
  <nav class="navigation poginatione">
    <div class="screen-reader-texte">Навигация по записям</div>
    <div class="nave-links">
      <span aria-current="page" class="web current">1</span>
      <a class="web" href="#">2</a>
      <span class="web dots">...</span>
      <a class="web" href="#">13</a>
      <a class="web" href="#">Далее</a>
    </div>
  </nav>
</body>

</html>

css html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

.pagination {
  text-align: center;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
}

.nav-links {
  margin-bottom: 30px;
}

.web_current {
  box-shadow: inset 0 0 0 1px #ced4da;
  color: #666;
}

.web {
  padding: 0.7em 1em;
  position: relative;
  margin: 0 0.3em;
  text-decoration: none;
  display: inline-block;
  overflow: hidden;
}

.web_hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 20%, rgba(255, 34, 21, 0.5) 100%);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.web_hover:hover::before {
  transform: translateY(0);
}
<nav class="navigation pagination">
  <div class="screen-reader-text">Навигация по записям</div>
  <div class="nav-links">
    <span aria-current="page" class="web web_current">1</span>
    <a class="web web_hover" href="#">2</a>
    <span class="web web_dots">...</span>
    <a class="web web_hover" href="#">13</a>
    <a class="web web_hover" href="#">Далее</a>
  </div>
</nav>

▲ 0

Hover и before не появляется градиент

Не мудрено. У тебя там такая каша из перепутанных названий классов.

Так же в css селекторах нет такой "комбинации" типа "или" .a или .b. Поэтому я добавил еще один класс .no и добавил его элементам с классами dots и current...

.poginatione {
  text-align: center;
}

.screen-reader-texte {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
}

.poginatione .nav-links {
  margin-bottom: 30px;
}

.web.current {
  box-shadow: inset 0 0 0 1px #ced4da;
  color: #666;
}

.nave-links .web {
  padding: 0.7em 1em;
  position: relative;
  margin: 0 0.3em;
  text-decoration: none;
}

.poginatione .nave-links .web:not(.no):before {
  background-color: #7f8ee0;
  top: 100%;
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: linear-gradient(180deg, transparent 20%, rgba(255, 34, 21, 0.5) 100%);
  transition: 0.3s;
}

.poginatione .nave-links:hover .web::before {
  top: 0%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" type="text/css" rel="stylesheet">
  <title>Document</title>
</head>

<body>
  <nav class="navigation poginatione">
    <div class="screen-reader-texte">Навигация по записям</div>
    <div class="nave-links">
      <span aria-current="page" class="web current no">1</span>
      <a class="web" href="#">2</a>
      <span class="web dots no">...</span>
      <a class="web" href="#">13</a>
      <a class="web" href="#">Далее</a>
    </div>
  </nav>
</body>

</html>