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

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

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

Е. Г. вы не можете надежно использовать классы CSS в HTML-письма.

830
css html inline-styles

18 ответов

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

длинный ответ: вы не должны.

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

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

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

посмотреть полностью 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>

Внимание: выше предполагается, что есть глава.

475

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

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

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

344

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

45

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

.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;" - это цвет переключателя при наведении, поместите цвет, который вам нужен, и тогда это решение работает. Я понимаю, что это может не быть идеальным решением с точки зрения совместимость однако это работает, если это абсолютно необходимо.

34

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

selector {rules}

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

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

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

<html>
    <style>
    #uniqueid:hover {do:something;}
    </style>
    <a id="uniqueid">hello</a>
 </html>
26

1) Добавление встроенного стиля с помощью 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',''); };

2) стили нескольких слов в Javascript:

element.style.fontSize="12px"

25

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

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

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
10
<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover является псевдоклассом и поэтому не может применяться с атрибутом style. Это часть селектора.

5

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

style="cursor: pointer;"
5

по Вашим комментариям, вы все равно отправляете файл JavaScript. Выполните опрокидывание в JavaScript. jQuery ' s $.hover() метод делает его легким, как и любая другая оболочка JavaScript. Это не слишком сложно и в прямом JavaScript.

4

нет никакого способа сделать это. Вы можете использовать JavaScript или CSS-блок.

возможно, есть какая-то библиотека JavaScript, которая преобразует проприетарный атрибут стиля в блок стиля. Но тогда код не будет соответствовать стандарту.

4

Я только что придумал другое решение.

мой вопрос: у меня <a> тег вокруг некоторых слайдов / основного средства просмотра контента, а также <a> теги в футере. Я хочу, чтобы они шли в одно и то же место в IE, поэтому весь абзац будет подчеркнут onHover, хотя они и не являются ссылками: слайд в целом является ссылкой. Т. е. не знает разницы. У меня также есть некоторые фактические ссылки в моем нижнем колонтитуле, которые нуждаются в подчеркивании и изменении цвета onHover. Я думал, что мне придется поставить стили встроены в теги нижнего колонтитула, чтобы изменить цвет, но совет сверху предполагает, что это невозможно.

решение: я дал ссылки нижнего колонтитула два разных класса, и моя проблема была решена. Я смог получить onHover изменение цвета в одном классе, есть слайды onHover не имеют изменения цвета / подчеркивания и все еще могут иметь внешние HREFS в нижнем колонтитуле и слайдах одновременно!

2

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

<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>
2

Я согласен с тени. Вы можете использовать onmouseover и onmouseout событие изменения в CSS через JavaScript.

и не говорите, что людям нужно активировать JavaScript для. Это только проблема стиля, поэтому не имеет значения, есть ли некоторые посетители без JavaScript ;) Хотя большинство Web 2.0 работает с JavaScript. См.Facebook например (много JavaScript) или Myspace.

1

Это довольно поздно в игре, но когда бы вы использовали JavaScript в HTML-письме? Например, в компании, в которой я сейчас работаю (рифмуется с Abodee), мы используем самый низкий общий знаменатель для большинства маркетинговых кампаний по электронной почте – и JavaScript просто не используется. Когда-либо. Если только вы не имеете в виду какую-то предварительную обработку.

Как упоминалось в соответствующем сообщении: "Lotus Notes, Mozilla Thunderbird, Outlook Express и Windows Live Mail, похоже, поддерживают какой-то Выполнения JavaScript. Больше ничего."

ссылка на статью, из которой это было взято: [http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

кроме того, как бы зависание перевести на мобильные устройства? Вот почему мне нравится ответ сверху:Long answer: you shouldn't.

Если у кого-то есть больше идей по этому вопросу, пожалуйста, не стесняйтесь исправить меня. Спасибо.

0

моя проблема заключалась в том, что я создаю веб-сайт, который использует много значков изображений, которые должны быть заменены другим изображением при наведении (например, синие изображения становятся красными при наведении). Для этого я придумал следующее решение:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

Я представил контейнер, содержащий пару изображений. Первый виден, а другой скрыт (display: none). При наведении на контейнер первый становится скрытым (display: none) , а второй снова отображается (display: block).

-1

Вы можете использовать псевдо-класс a:hover только во внешних таблицах стилей. Поэтому я рекомендую использовать внешнюю таблицу стилей. Код:

a:hover {color:#FF00FF;}   /* Mouse-over link */
-2

вы можете сделать id, добавив класс, но никогда не встроенный.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 линии, но вы можете повторно использовать класс везде.

-2