Как написать: hover во встроенном CSS? - PullRequest
Новая
       69

Как написать: hover во встроенном CSS?

921 голосов
/ 23 июня 2009

У меня есть случай, когда я должен написать встроенный код CSS, и я хочу применить стиль наведения на привязку.

Как я могу использовать a:hover во встроенном CSS внутри атрибута стиля HTML?

например. Вы не можете надежно использовать классы CSS в электронных письмах HTML.

Ответы [ 21 ]

519 голосов
/ 23 июня 2009

Краткий ответ: вы не можете.

Длинный ответ: не стоит.

Дайте ему имя класса или идентификатор и используйте таблицы стилей для применения стиля.

:hover является псевдо-селектором и для CSS имеет значение только в таблице стилей. Нет никакого эквивалента в стиле inline (так как он не определяет критерии выбора).

Ответ на комментарии ОП:

См. Полностью Pwn CSS с Javascript для хорошего сценария динамического добавления правил CSS. Также см. Изменение таблицы стилей для ознакомления с некоторыми теориями по этому вопросу.

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

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

Внимание: вышеизложенное предполагает наличие секции head .

384 голосов
/ 23 июня 2009

Вы можете получить тот же эффект, изменив стили с помощью JavaScript в параметрах onMouseOver и onMouseOut, хотя это крайне неэффективно, если вам нужно изменить более одного элемента: 

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

Кроме того, я не могу точно вспомнить, работает ли this в этом контексте. Возможно, вам придется переключить его с помощью document.getElementById('idForLink').

49 голосов
/ 27 марта 2012

Вы могли бы сделать это в какой-то момент в прошлом. Но теперь (согласно последней редакции того же стандарта, который является Рекомендацией кандидата), вы не можете .

33 голосов
/ 10 августа 2015

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

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a

В этом случае встроенный код: "background-color: red;" это переключатель цвета при наведении, поместите туда нужный цвет, и тогда это решение сработает. Я понимаю, что это не может быть идеальным решением с точки зрения совместимости, однако это работает, если это абсолютно необходимо.

28 голосов
/ 22 июля 2013

с использованием Javascript:

а) Добавление встроенного стиля 

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

б) или немного более сложный метод - добавление "наведения мыши" 

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

Примечание: стили из нескольких слов (т.е. font-size) в Javascript написаны вместе :

element.style.fontSize="12px"

25 голосов
/ 23 июня 2009

Вы не можете делать в точности то, что описываете, поскольку a:hover является частью селектора, а не правил CSS. Таблица стилей состоит из двух компонентов: 

selector {rules}

Встроенные стили имеют только правила; селектор неявно является текущим элементом.

Селектор - это выразительный язык, который описывает набор критериев для сопоставления элементов в XML-подобном документе.

Однако вы можете приблизиться, потому что набор style технически может пойти куда угодно: 

<html>
    <style>
    #uniqueid:hover {do:something;}
    </style>
    <a id="uniqueid">hello</a>
 </html>
10 голосов
/ 23 июня 2009

Встроенные объявления псевдокласса не поддерживаются в текущей итерации CSS (хотя, насколько я понимаю, это может прийти в будущей версии).

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

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
9 голосов
/ 14 января 2018

Это лучший пример кода: 

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>

Предложение модератора: держите разделение интересов.

HTML 

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

JS 

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}
7 голосов
/ 01 мая 2013

Как указывалось, вы не можете установить произвольные встроенные стили для наведения, но вы можете изменить стиль наведения курсора в CSS , используя в соответствующем теге следующее: 

style="cursor: pointer;"
4 голосов
/ 15 ноября 2018

Вы можете сделать это. Но не во встроенных стилях. Вы можете использовать onmouseover и onmouseout события: 

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>
Страница:
...