Доступ запрещен для пользователя 'root' @ 'localhost' с помощью PHPMyAdmin

Вот еще одна идея, которая позволяет вам воздействовать на другие элементы без учета какого-либо конкретного селектора и только с использованием состояния :hover основного элемента.

Для этого я буду полагаться на использование настраиваемых свойств (переменные CSS). Как мы можем прочитать в спецификации :

Пользовательские свойства являются обычными свойствами, поэтому они могут быть объявлены на любом элементе, разрешены с нормальным наследованием и каскадными правилами. ..

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

Вот пример:

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}

Почему это может быть лучше, чем использование специального селектора в сочетании с hover?

Я могу предоставить по крайней мере 2 причины, которые делают этот метод хорошим:

1. Если у нас есть много вложенных элементов, которые имеют одни и те же стили, это будет избегайте сложного селектора, чтобы нацелить их на зависание. Используя пользовательские свойства, мы просто изменяем значение при зависании родительского элемента.
2. Пользовательское свойство может использоваться для замены значения любого свойства, а также его частичного значения. Например, мы можем определить настраиваемое свойство для цвета, и мы используем его в пределах border, linear-gradient, background-color, box-shadow и т. Д. Это позволит нам отказаться от всех этих свойств при наведении.

Вот более сложный пример:

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}

Как мы видим выше, нам нужен только один Объявление CSS для изменения многих свойств различных элементов.