0

Не работает :hover. Тысячу раз уже проверил, пробовал разные варианты.

Код (HTML)

    <section class="intro">
        <div class="container">
            <div class="intro__inner">
                <div class="intro__left">
                    <div class="intro__title">
                        Get the most fun
                        weather app
                    </div>

                    <div class="intro__subtitle">
                        Simple, nice and user-friendly application of the weather. Only useful information
                    </div>

                    <div class="intro__buttons">
                        <a href="" class="intro__button" style="background-color: #fc6a42;">Download</a>
                        <a href="" class="intro__button" style="background-color: #4466c9;">Features</a>
                    </div>
                </div>
                <div class="intro__right">
                    <img src="img/intro-phone.png" alt="">
                </div>
                <div class="intro__bottom">
                    <a href=""><img src="img/intro-button.jpg" alt=""></a>
                </div>
            </div>
        </div>
    </section>

SCSS

.intro {
    background: url("../img/intro-bg.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 959px;
    width: 100%;

    // .intro__inner

    &__inner {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    // .intro__left

    &__left {
        margin-bottom: -100px;
        width: 40%;
    }

    // .intro__title

    &__title {
        color: #ffffff;
        font-family: Ubuntu;
        font-size: 60px;
        font-weight: 700;
        font-style: normal;
        letter-spacing: normal;
        line-height: normal;
        text-align: left;
        font-style: normal;
        letter-spacing: normal;
        line-height: normal;
    }

    // .intro__subtitle

    &__subtitle {
        margin: 42px 0 59px 0;
        color: #ffffff;
        font-family: Ubuntu;
        font-size: 18px;
        font-weight: 400;
        font-style: normal;
        letter-spacing: normal;
        line-height: 30px;
        text-align: left;
        font-style: normal;
        letter-spacing: normal;
        line-height: normal;
    }

    // .intro__button

    &__button {
        border-radius: 5px;
        padding: 17px 30px;
        color: #ffffff;
        font-family: Ubuntu;
        font-size: 18px;
        font-weight: 700;
        font-style: normal;
        letter-spacing: normal;
        line-height: normal;
        text-align: left;
        font-style: normal;
        letter-spacing: normal;
        line-height: normal;
        transition: .6s linear;
        &:last-child {
            margin-right: 0;
        }
        margin-right: 13px;
        :hover {
            color: black;
        }
    }

    // .intro__right

    &__right {
        margin-bottom: -100px;
        width: 60%;
    }

    &__bottom {
        margin-bottom: -50px;
        a {
            height: 100%;
            img {
                transition: .3s linear;
                border-radius: 100px;
            }
            :hover {
                transform: translate(0, -10px) rotate(-360deg);
            }
        }

        
    }
}

CSS

.intro {
  background: url("../img/intro-bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 959px;
  width: 100%;
}

.intro__inner {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.intro__left {
  margin-bottom: -100px;
  width: 40%;
}

.intro__title {
  color: #ffffff;
  font-family: Ubuntu;
  font-size: 60px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: normal;
  line-height: normal;
  text-align: left;
  font-style: normal;
  letter-spacing: normal;
  line-height: normal;
}

.intro__subtitle {
  margin: 42px 0 59px 0;
  color: #ffffff;
  font-family: Ubuntu;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  line-height: 30px;
  text-align: left;
  font-style: normal;
  letter-spacing: normal;
  line-height: normal;
}

.intro__button {
  border-radius: 5px;
  padding: 17px 30px;
  color: #ffffff;
  font-family: Ubuntu;
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: normal;
  line-height: normal;
  text-align: left;
  font-style: normal;
  letter-spacing: normal;
  line-height: normal;
  -webkit-transition: .6s linear;
  transition: .6s linear;
  margin-right: 13px;
}

.intro__button:last-child {
  margin-right: 0;
}

.intro__button :hover {
  color: black;
}

.intro__right {
  margin-bottom: -100px;
  width: 60%;
}

.intro__bottom {
  margin-bottom: -50px;
}

.intro__bottom a {
  height: 100%;
}

.intro__bottom a img {
  -webkit-transition: .3s linear;
  transition: .3s linear;
  border-radius: 100px;
}

.intro__bottom a :hover {
  -webkit-transform: translate(0, -10px) rotate(-360deg);
          transform: translate(0, -10px) rotate(-360deg);
}
3
  • &:hover {...}
    – meine
    21 ноя 2020 в 16:03
  • Заработало, но со свойством transform: translate(0, -30px); по прежнему не работает
    – Casti666
    21 ноя 2020 в 16:08
  • 1
    Не надо использовать SCSS если не понимаешь основ CSS / Там кругом :hover к пустому месту присваивается. Как написал meine правильно писать &:hover а в некоторых случаях привязывать к родителю 22 ноя 2020 в 12:01

1 ответ 1

0

для начала убрать пробелы перед псевдоклассом :hover. Он же псевдо, он к "не псевдо" классу привязывается

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.