CSS-анимация с нажатием "Наведи на меня"

Question

CSS-анимация с нажатием "Наведи на меня"

Рейтинг: 0Ответов: 2Опубликовано: 19.03.2023

Как сделать анимацию с нажатием "Наведи на меня", чтобы вскочила "Подсказочка!" с блоком? Требуется решение БЕЗ JavaScript

.block {
  position: absolute;
  width: 600px;
  height: 50px;
  background: rgb(199, 199, 199);
  top: 100px;
  left: 600px;
}

a {
  display: flex;
  justify-content: space-around;
}

a::after {
  animation: normal;
  -webkit-animation: none;
}

.block2 {
  width: 200px;
  height: 50px;
  text-align: center;
  background-color: black;
  border: 8px solid black;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  opacity: .7;
  position: absolute;
  top: 130px;
  left: 790px;
}

#block2:start {
  width: 200px;
  height: 50px;
  text-align: center;
  background-color: black;
  border: 8px solid black;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  opacity: .7;
  position: absolute;
  top: 130px;
  left: 790px;
}

p {
  color: white;
  display: flex;
  justify-content: center;
}

.block2 {
  border: 1px solid black;
  border-radius: 10px;
  width: 200px;
  height: 50px;
  left: 800px;
  position: relative;
  background: black;
  color: #fff;
  box-shadow: 0 0 7px #000;
}

.block2::after,
.block2::before {
  content: '';
  position: absolute;
  background: black;
  left: 90px;
  bottom: -11px;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 7px #000;
  z-index: -1;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: -10px;
}

.block2::before {
  z-index: 1;
  box-shadow: none;
}

<div class="block">
  <a href="#">Наведи на меня</a>
</div>
<div class="block2">
  <p>Подсказочка!</p>
</div>
<div class="ugol"></div>

<div class="container"></div>

css html html5 css-animation css3

Источник: Stack Overflow на русском

Answer 1

▲ 1

.block {
  position: absolute;
  width: 600px;
  height: 50px;
  background: rgb(199, 199, 199);
  top: 100px;
  left: 600px;
}

a {
  display: flex;
  justify-content: space-around;
}

a::after {
  animation: normal;
  -webkit-animation: none;
}

.block2 {
  width: 200px;
  height: 50px;
  text-align: center;
  background-color: black;
  border: 8px solid black;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  opacity: .7;
  position: absolute;
  top: 130px;
  left: 790px;
}

#block2:start {
  width: 200px;
  height: 50px;
  text-align: center;
  background-color: black;
  border: 8px solid black;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  opacity: .7;
  position: absolute;
  top: 130px;
  left: 790px;
}

p {
  color: white;
  display: flex;
  justify-content: center;
}

.block2 {
  border: 1px solid black;
  border-radius: 10px;
  width: 200px;
  height: 50px;
  left: 800px;
  position: relative;
  background: black;
  color: #fff;
  box-shadow: 0 0 7px #000;
  display:none;
}

.block2::after,
.block2::before {
  content: '';
  position: absolute;
  background: black;
  left: 90px;
  bottom: -11px;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 7px #000;
  z-index: -1;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: -10px;
}

.block:hover ~ .block2 {
   display: block;
}

<body>
    <div class="block">
  <a  href="#">Наведи на меня</a>
</div>
<div class="block2">
  <p>Подсказочка!</p>
</div>
<div class="ugol"></div>

<div class="container"></div>

</body>

Answer 2

▲ 0

Можно воспользоваться "смежными селекторами" (+), комбинаторами если угодно.

.block {
  position: absolute;
  width: 600px;
  height: 50px;
  background: rgb(199, 199, 199);
  top: 100px;
  left: 600px;
}

a {
  display: flex;
  justify-content: space-around;
}

a::after {
  animation: normal;
  -webkit-animation: none;
}

.block2 {
  display: none; /* скрываем по умолчанию */
  width: 200px;
  height: 50px;
  text-align: center;
  background-color: black;
  border: 8px solid black;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  opacity: .7;
  position: absolute;
  top: 130px;
  left: 790px;
}

.block:hover + .block2 {
  display: block; /* показываем при наведении на `.block` */
}

#block2:start {
  width: 200px;
  height: 50px;
  text-align: center;
  background-color: black;
  border: 8px solid black;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  opacity: .7;
  position: absolute;
  top: 130px;
  left: 790px;
}

p {
  color: white;
  display: flex;
  justify-content: center;
}

.block2 {
  border: 1px solid black;
  border-radius: 10px;
  width: 200px;
  height: 50px;
  left: 800px;
  position: relative;
  background: black;
  color: #fff;
  box-shadow: 0 0 7px #000;
}

.block2::after,
.block2::before {
  content: '';
  position: absolute;
  background: black;
  left: 90px;
  bottom: -11px;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 7px #000;
  z-index: -1;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: -10px;
}

.block2::before {
  z-index: 1;
  box-shadow: none;
}

<div class="block">
  <a href="#">Наведи на меня</a>
</div>
<div class="block2">
  <p>Подсказочка!</p>
</div>
<div class="ugol"></div>

<div class="container"></div>

Это работает так:

Сначала нужно написать селектор для первого элемента.

.some-elem

Потом добавить знак + (пробелы не обязательны)

.some-elem +

После чего селектор для второго элемента

.some-elem + #elem-two

То есть, получается такая конструкция:

Если существует элемент который, совпадает с селектором слева
Если после (только на один элемент впереди) него существует элемент который, совпадает с селектором справа
Тогда применить стили к элементу который совпадает со вторым селектором

Есть похожый "селектор следующего элемента" (~), который проверяет нет ли после элемента вообще хоть кого-то элемента совпадающего с селектором справа, а не только на один элемент вперёд.

Воспользовавшись этой конструкцией, я и написал такое решение:

.block:hover + .block2 { /* Если есть элемент `.block`, на который наводится пользователь, тогда к элементу с классом `block2` дать следующие стили: */
  /* Ну и тут стили соответственно */
}

Более плавное решение:

.block {
  position: absolute;
  width: 600px;
  height: 50px;
  background: rgb(199, 199, 199);
  top: 100px;
  left: 600px;
}

a {
  display: flex;
  justify-content: space-around;
}

a::after {
  animation: normal;
  -webkit-animation: none;
}

.block2 {
  opacity: 0;
  pointer-events: none;
  transition: .3s;
  width: 200px;
  height: 50px;
  text-align: center;
  background-color: black;
  border: 8px solid black;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  position: absolute;
  top: 130px;
  left: 790px;
}

.block:hover + .block2 {
  opacity: .7;
  pointer-events: auto;
}

#block2:start {
  width: 200px;
  height: 50px;
  text-align: center;
  background-color: black;
  border: 8px solid black;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  opacity: .7;
  position: absolute;
  top: 130px;
  left: 790px;
}

p {
  color: white;
  display: flex;
  justify-content: center;
}

.block2 {
  border: 1px solid black;
  border-radius: 10px;
  width: 200px;
  height: 50px;
  left: 800px;
  position: relative;
  background: black;
  color: #fff;
  box-shadow: 0 0 7px #000;
}

.block2::after,
.block2::before {
  content: '';
  position: absolute;
  background: black;
  left: 90px;
  bottom: -11px;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 7px #000;
  z-index: -1;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: -10px;
}

.block2::before {
  z-index: 1;
  box-shadow: none;
}

<div class="block">
  <a href="#">Наведи на меня</a>
</div>
<div class="block2">
  <p>Подсказочка!</p>
</div>
<div class="ugol"></div>

<div class="container"></div>

CSS-анимация с нажатием &quot;Наведи на меня&quot;

Ответы

CSS-анимация с нажатием "Наведи на меня"