Как уменьшить один элемент при увеличении другого в css3 - PullRequest
Новая
       35

Как уменьшить один элемент при увеличении другого в css3

0 голосов
/ 02 августа 2020

У меня на сайте две кнопки. Когда кто-то наводит курсор на кнопку A, она должна становиться немного больше, а кнопка B становится такой же, немного меньше. И наоборот, когда кто-то наводит курсор на кнопку B. Мой вопрос в том, как изменить элементы размера одного класса div из другого класса div.

Это код HTML5, относящийся к двум кнопкам элементы. В качестве примера мы будем называть кнопку «Я голоден», кнопку A. И кнопку «Показать еще» B. 

.btn:link,
.btn:visited {
  display: inline-block;
  padding: 10px 30px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 100px;
  text-align: center;
  color: white;
  transition: background-color 0.5s;
  transition: width 0.5s;
}

.btn-full:link,
.btn-full:visited {
  background-color: #2ecc71;
  border: 2px solid #2ecc71;
  width: 14%;
}

.btn-ghost:link,
.btn-ghost:visited {
  border: 2px solid #2ecc71;
  width: 20%;
}

.btn:hover,
.btn:active {
  background-color: #27ae60;
  color: white;
}

.btn-full:hover,
.btn-full:active {
  width: 16%;
}

.btn-ghost:hover,
.btn-ghost:active {
  width: 22%;
}
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>

Итак, в качестве другого примера. При наведении указателя мыши на кнопку A она должна увеличиться с 14% до 16%, а кнопка B одновременно уменьшиться с 22% до 20%.

Ответы [ 2 ]

2 голосов
/ 02 августа 2020

Вы можете добиться этого эффекта с помощью свойства flex-grow. ссылка w3schools 

.container {
  width: 500px;
  display: flex;
}

.btn {
  background-color: lightgreen;
  border: 2px solid green;
  padding: 8px;
  flex-grow: 1;
  transition: all.5s;
}

.btn:hover {
  flex-grow: 2;
}
<div class="container">
  <a class="btn" href="#">I’m hungry</a>
  <a class="btn" href="#">Show me more</a>
</div>
0 голосов
/ 02 августа 2020

В следующем решении используется тот факт, что родительский элемент также получает :hover: 

.buttons a {
  float:left;
  width: 5em;
  height: 3em;
  margin: 0 1em;
  border-radius: 3em;
  text-align: center;
  line-height: 3;
  color: #fff;
  background: navy;
  transition: .5s
}

.buttons:hover a {
  width: 3em;
  background: grey
}

.buttons:hover a:hover {
  width: 7em;
  background: forestgreen
}
<div class="buttons">
  <a href="#">A</a>
  <a href="#">B</a>
</div>
...