Как добавить новый класс в элемент динамически?

Ответ 1

Короткий ответ no:)

Но вы можете просто использовать один и тот же CSS для зависания так:

a:hover, .hoverclass {
    background:red;
}

Может быть, если вы объясните, почему вам нужен добавленный класс, может быть лучшее решение?

Ответ 2

Поскольку каждый дал вам ответы jQuery/JS на это, я предоставлю дополнительное решение. Ответ на ваш вопрос по-прежнему отсутствует, но с помощью LESS (предварительный процессор CSS) вы можете сделать это легко.

.first-class {
  background-color: yellow;
}
.second-class:hover {
  .first-class;
}

Проще говоря, при каждом наведении курсора на .second-class он даст все свойства .first-class. Обратите внимание, что он не будет добавлять класс постоянно, только при наведении. Вы можете узнать больше о LESS здесь: Начало работы с МЕНЬШЕ

Вот и способ SASS:

.first-class {
  background-color: yellow;
}
.second-class {
  &:hover {
    @extend .first-class;
  }
}

Ответ 3

CSS действительно не имеет возможности изменять объект таким же образом, как JavaScript, поэтому, короче говоря, нет.

Ответ 4

:hover - псевдослот, поэтому вы можете разместить свои объявления CSS:

a:hover {
    color: #f00;
}

Вы также можете использовать список селекторов для применения объявлений CSS к зависающему элементу или элементу с определенным классом:

.some-class,
a:hover {
    color: #f00;
}

Ответ 5

Только с помощью CSS, нет. Вам нужно использовать jQuery, чтобы добавить его.

Ответ 6

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

поэтому я думаю, что не нужно отвечать, и во многих случаях он должен использовать jquery или javascript.

Ответ 7

Вот как вы это делаете:

var e = document.getElementById('myIdName');
var value = window.getComputedStyle(e, null).getPropertyValue("zIndex");
alert('z-index: ' + value);