creatium выделение цвета, или плагин, который покажет код каждого блока

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

Есть сайт, который был создан в конструкторе creatium.И там есть к примеру карточка товара состоящая из картинки название описание и кнопки. Кнопка при наведении на нее меняет цвет. Так вот можно ли сделать так что кнопка меняла цвет не при наведении на нее, а на карточку. А лучше найти какой-то плагин, в котором можно будет код каждой секции, блока

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

Ответы

▲ 0

Это просто, в стилях вам нужно прописать конструкцию вида:

[класс/id элемента на который необходимо навести]:hover>[класс/id элемента который нужно изменить]

Пример:

cardsForm:hover>.button {
  //необходимый стиль в вашем случае
  background-color:
}

Учтите в данном примере "Button" должна быть непосредственным дочерним элементом "cardsForm"

Более полный пример:

body {
  font-family: system-ui;
  color: #3d3d3d;
}

#cardsBlock {
  display: flex;
}

.name {
  font-size: 0.85rem;
  font-weight: 600;
}

.description {
  font-size: 0.7rem;
  margin: 10px 0;
}

.img {
  background-color: #eee;
  width: 140px;
  height: 140px;
  margin: 10px 0;
  border-radius: 9px;
}

.cardsForm {
  width: 160px;
  box-shadow: 0 0 1px 2px #eee;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px;
  padding: 10px;
  cursor: default;
}

button {
  background-color: #fff;
  color: #000;
  width: 120px;
  height: 28px;
  border-radius: 6px;
}

.cardsForm:hover>div button {
  background-color: #3d3d3d;
  color: #fff;
}
<div id="cardsBlock">
  <div class="cardsForm">
    <div class="img"></div>
    <div class="name">Название 1</div>
    <div class="description">Отличное опиание которое в точной мере описывает данный продукт, предоставляя пользователю самую важную информацию</div>
    <div>
      <button>Кнопка</button>
    </div>
  </div>
  <div class="cardsForm">
    <div class="img"></div>
    <div class="name">Название 2</div>
    <div class="description">Отличное опиание которое в точной мере описывает данный продукт, предоставляя пользователю самую важную информацию</div>
    <div>
      <div>
        <button class="buyButton">Кнопка</button>
      </div>
    </div>
  </div>
</div>