Как настроить ширину и цвет в то же время при анимации с CSS? - PullRequest
Новая
       3

Как настроить ширину и цвет в то же время при анимации с CSS?

0 голосов
/ 25 апреля 2020

HTML код: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>page moves</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="leftdiv"


            <a href="#">ABOUT</a>
        </div>

        <div class="rightdiv">
            <a href="#">MENU</a>
        </div>
    </body>
</html>

CSS код: 

body
{
     margin: 0px;
     padding: 0px;
     width: 100%;
     height: 100%;
}
div
{
     display: inline-block;
     position: absolute;
     width: 50%;
     height: 100%;
}
.leftdiv
{    
     background-color: black;
     left: 0;
}
.rightdiv
{
     background-color: firebrick;
     right: 0;
}
a
{
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     top: 50%;
}
.leftdiv a
{
     color: crimson;
}
.rightdiv a
{
     color: black;
}
.leftdiv:hover
{
     width: 75%;
     transition-duration: 0.9s;
}

Таким образом, проблема заключается в том, что когда я наводю div с классом "leftdiv", то a "перемещается, но цвет фона в div с классом" leftdiv "не поспевает за этим, почему ??

Ответы [ 3 ]

1 голос
/ 25 апреля 2020

Если вы хотите переместить div поверх другого, вы должны использовать z-index для этого. Увеличьте число, которое вы увидите на заднем плане.

Учитывая, что в вашем коде нет других значений z-index, поэтому вы можете использовать z-index:1;, и это решит вашу проблему. 

body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

div {
  display: inline-block;
  position: absolute;
  width: 50%;
  height: 100%;
}

.leftdiv {
  background-color: black;
  left: 0;
}

.rightdiv {
  background-color: firebrick;
  right: 0;
}

a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  top: 50%;
}

.leftdiv a {
  color: crimson;
}

.rightdiv a {
  color: black;
}

.leftdiv:hover {
  width: 75%;
  transition-duration: 0.9s;
  z-index: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>page moves</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="leftdiv">


    <a href="#">ABOUT</a>
  </div>

  <div class="rightdiv">
    <a href="#">MENU</a>
  </div>
</body>

</html>
0 голосов
/ 25 апреля 2020

Здесь происходит пара вещей. Относительное положение используется для родительского элемента, а абсолютное - для левого. Это позволяет перекрытию происходить. Эффект перехода добавляется к элементу unhovered, а не только к зависанию. При наведении все свойства меняются. Обратите внимание, что они должны существовать в классе unhovered и в классе hovered, чтобы эффект появился. 

body {
   margin: 0;
   width: 100vw;
   height: 100vh;
}

section {
  height: 100%;
  width: 100%;
  position: relative;
}

.left, .right {
  height: 100%;
  width: 50%;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  position: absolute;
  background: blue;
  z-index: 20;
  transition: all 1s ease-in-out;
}

.left:hover {
   width: 70%;
   color: white;
   background: green;
}

.right {
  margin-left: 50%;
  background: red;
}
<section>
  <div class="left">Left</div>
  <div class="right">Right</div>
</section>
0 голосов
/ 25 апреля 2020

похоже, что вы хотите изменить z-индекс, который заставит элемент перекрывать другой. Вы можете прочитать о z-index здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Изменяя z-index от .leftdiv до 1, он получит более высокий уровень, чем .rightdiv , Я добавил его к .leftdiv:hover, но это также можно сделать прямо на .leftdiv

body
{
     margin: 0px;
     padding: 0px;
     width: 100%;
     height: 100%;
}
div
{
     display: inline-block;
     position: absolute;
     width: 50%;
     height: 100%;
}
.leftdiv
{    
     background-color: black;
     left: 0;
}
.rightdiv
{
     background-color: firebrick;
     right: 0;
}
a
{
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     top: 50%;
}

.leftdiv a
{
     color: red;
}
.rightdiv a
{
     color: black;
}
.leftdiv:hover
{
     width: 75%;
    z-index: 1;
     transition-duration: 0.9s;
}
    <body>
        <div class="leftdiv">


            <a href="#">ABOUT</a>
        </div>

        <div class="rightdiv">
            <a href="#">MENU</a>
        </div>
    </body>
</html>

Для получения дополнительной помощи по переходам и CSS анимациям я нашел этот бесплатный курс весьма полезным: https://scrimba.com/course/gcssanimations

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...