@weizz

Не работает :hover?

Всем привет, я тут новый, возникла у меня ошибся с кодом: не работает :hover при наведение ничего не реагирует
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>МультФильмы - Смотри на HD качестве!</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Fjalla+One&family=Montserrat:wght@700;800&family=Quicksand:wght@700&family=Syne+Mono&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
    <div class="container">
      <div class="header__inner"> 
         <div class="header__logo">Мультфильмы HD</div>       
         <nav>
             <a class="nav__link active" href="#">О нас</a>
             <a class="nav__link" href="#">Контакты</a>
             <a class="nav__link" href="#">Поддержка</a>
             <a class="nav__link" href="#">Купить</a>    
           </nav> 
        </div>
                
        <div class="slider__nije">
            <div class="nijeslider_item active">
                   <span clas="slider_num">Уникальный</span>
                   проект
                 </div>
            <div class="nijeslider_item">
                   <span clas="slider_num">3 Года</span>
                   Работы
                 </div>
                 <div class="nijeslider_item">
                   <span clas="slider_num">Поддержка</span>
                   24/7
                 </div>
        </div>
    </div>
</header>

<div class="intro">
    <div class="container">
      <div class="intro__inner">
       <h2 class="intro__suptitle">СМОТРИ НА HD</h2>
       <h1 class="intro__title">КАЧЕСТВЕ</h1>    
       <a class="lrn" href="#">ПОДРОБНЕЕ</a>
        </div>
    </div>
</div>

<section class="section">
    <div class="container">
        <div class="section__header">
            <h3 class="section__suptitle">What we do</h3>
            <h2 class="section__title">Story abous us</h2>
            <div class="section__text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ut nemo, eius cupiditate suscipit. Fuga, blanditiis perspiciatis reprehenderit commodi deserunt similique a maxime, aliquid itaque at! Magni animi placeat labore.</p>
            </div>
        </div>
        
        <div class="about">
            <div class="about__item">
               <div class="about__img">
                   <img src="assets/css/images/about/kartinka1.jpg" alt="">
               </div> 
            </div>
            <div class="about__item">
               <div class="about__img">
                   <img src="assets/css/images/about/kartinka3.jpg">
               </div>
            </div>
            <div class="about__item">
               <div class="about__img">
                   <img src="assets/css/images/about/kartinka2.jpg">
               </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>


css
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

* {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, h7, h8 {
    margin: 0;
}

.container {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
}

.intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: url(images/intro.jpg);
    color: #000;
}

.intro__inner {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.intro__title {
    color: #fff;
    font-size: 150px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
}

.intro__title:after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 40px auto;
    background-color: #fff
}

.intro__suptitle {
    font-size: 72px;
    color: #fff;
    text-align: center;
}

.header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding-top: 20px;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo {
    font-size: 30px;
    font-weight: 710;
    color: #fff;
}

.nav {
    font-size: 14px;
    text-transform: uppercase;
}

.nav__link{
    display: inline-block;
    vertical-align: top;
    margin: 0 12px;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s linear;
    position: relative;
}

.nav__link:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    opacity: 0;
    background-color: #ae00ff;    
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    transition: opacity 0.3s linear;
}

.nav__link:hover {
    color: #ae00ff;
}

.nav__link:hover:after,
.nav__link.active:after {
    opacity: 1;
}

.nav__link.active {
    color: #ae00ff;
}

.lrn {
    display: inline-block;
    vertical-align: top;
    border: 2px solid #fff;
    padding: 3px 22px;
    font-size: 14px;
    font-weight: 100;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.1s linear, color 0.3s linear;
}

.lrn:hover {
    background-color: #fff;
    color: #650491;
}

.slider__nije {
    display: flex;
    justify-content: space-between;
    color: #fff;
    margin-top: 625px;
}

.nijeslider_item {
    width: 20%;
    padding: 20px 0;
    border-top: 2px solid #650491;
    opacity: 0.7s;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
}

.nijeslider_item.active {
    opacity: 1;
}

.slider_num {
    font-size: 24px;
    font-weight: 700;
    color: black;
}

.section {
    padding: 80px 0;
}

.section__header {
    width: 100%;
    max-width: 950px;
    margin: 0 auto 40px;
    text-align: center;
}

.section__suptitle {
    font-family: 'Kaushan Script', cursive;
    font-size: 24px;
    color: #333;
}

.section__title {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
}

.section__title:after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 30px auto 0;
    background-color: #ae00ff;
}

.section__text {
    font-size: 15px;
    color: #333;
}

.about {
    display: flex;
    justify-content: space-between;
}

.about__item {
    width: 27%;
}

.about__item:hover .about__img img {
    opacity: 0.7s;
}

.about__img {
    background: linear-gradient(to bottom, #d92bc7, #9e4694)
}

.about__img img {
    transition: 0.1s linear;
}
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
@senselessV7
Прозрачность без s должна быть:

.about__item:hover .about__img img {
    opacity: 0.7;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы