Работаем с zero-блоками и кодом
<style>
.shape .tn-atom {
background-color: #000000 !important; /* Исходный цвет */
transition: background-color 0.3s ease;
}
<style>
.shape .tn-atom {
background-color: #000000 !important; /* Исходный цвет */
transition: background-color 0.3s ease;
}
.shape, .text {
transition: color 0.3s ease;
}
.shape:hover .tn-atom {
background-color: #FFFFFF !important; /* Новый цвет при наведении */
}
.shape:hover + .text .tn-atom,
.shape:hover ~ .text .tn-atom {
color: #000000 !important; /* Цвет текста при наведении на .shape */
}
.shape2 .tn-atom {
background-color: #000000 !important; /* Исходный цвет */
transition: background-color 0.3s ease;
}
.shape2, .text2 {
transition: color 0.3s ease;
}
.shape2:hover .tn-atom {
background-color: #FFFFFF !important; /* Новый цвет при наведении */
}
.shape2:hover + .text2 .tn-atom,
.shape2:hover ~ .text2 .tn-atom {
color: #000000 !important; /* Цвет текста при наведении на .shape */
}
.shape3 .tn-atom {
background-color: #000000 !important; /* Исходный цвет */
transition: background-color 0.3s ease;
}
.shape3, .text3 {
transition: color 0.3s ease;
}
.shape3:hover .tn-atom {
background-color: #FFFFFF !important; /* Новый цвет при наведении */
}
.shape3:hover + .text3 .tn-atom,
.shape3:hover ~ .text3 .tn-atom {
color: #000000 !important; /* Цвет текста при наведении на .shape */
}
.shape4 .tn-atom {
background-color: #000000 !important; /* Исходный цвет */
transition: background-color 0.3s ease;
}
.shape4, .text4 {
transition: color 0.3s ease;
}
.shape4:hover .tn-atom {
background-color: #FFFFFF !important; /* Новый цвет при наведении */
}
.shape4:hover + .text4 .tn-atom,
.shape4:hover ~ .text4 .tn-atom {
color: #000000 !important; /* Цвет текста при наведении на .shape */
}
</style>