Не работает :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);
}
&:hover {...}