Как раскрасить часть по нисходящей линии? - PullRequest
Новая
       1

Как раскрасить часть по нисходящей линии?

1 голос
/ 31 марта 2020

У меня есть простой div, который падает при зависании. Когда линия идет вниз, я хочу, чтобы вся часть страницы над линией была окрашена любым цветом, но я не могу понять, как.

Это может быть только с HTML & CSS. 

.a1:hover {
  transform: translateY(96vh);
}

.a1 {
  top: 20px;
  height: 20px;
  position: relative;
  transition: all 4s;
  background-color: #0000ff;
}
<div class="a1"></div>

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Это способ сделать это (написанный следующим образом этот ответ ) 

.a1:hover{
    transform: translateY(96vh);
}
.a1{
 top:20px;
 height: 20px; 
 position : relative; 
 transition: all 4s;
 background-color:#0000ff; 
}
.a2{
width:100%;
height:0vh;
transition: height 4s;
}
.a1:hover + .a2{
 background-color:#000;
 height:96vh;
}
.a2:hover{
background-color:#000;
height:0vh;
}
<!doctype html> 
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="Lab2.css">
        <title>Lab2b</title>
    </head>
    <body>
    <div class="a1"></div>
    <div class="a2"></div>
    </body>
</html>
0 голосов
/ 31 марта 2020

Вы должны увеличить высоту вместо преобразования translate ...

измените css на это: 

.a1:hover {
  height: 96vh;
}
.a1 {
  top: 20px;
  height: 20px;
  position: relative;
  transition: all 2s ease-in;
  background-color: #0000ff;
}

пример кода ручки

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

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

...