1018

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

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

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

html css inline-styles Амр Элгархи
источник

24

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

провидение

8

Для этого есть предложенный стандарт CSS; не знаю, какую поддержку браузера он может иметь (подсказка: они могут использовать пользовательские теги, такие как -moz и т. д.): w3.org/TR/2002/WD-css-style-attr-20020515

Kato

1

Возможен ли дубликат Возможно ли создание встроенных псевдо стилей?

Synetech

17

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

ЭльБел

1

@FriendlyNeighborhoodIdiot Этой странице 13 лет, с тех пор черновик был заброшен.

Тофандель

573

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

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

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

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

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

См. Totally 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>

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

Джонатан Финглэнд
источник

4

Вы можете добавить классы CSS в JavaScript

Джонатан Фингланд

204

Существуют и другие обстоятельства, когда встроенный CSS является единственным вариантом, например, электронные письма в формате HTML (например, Gmail игнорирует CSS, если он не встроенный). К сожалению, с отключенным Javascript в большинстве почтовых клиентов, я еще не нашел способ добавить: эффекты при наведении.

Саймон Ист

24

@ Като, хотя это отличная ссылка, и я очень хочу, чтобы она работала, к сожалению, это не так. Просто чтобы подтвердить, я протестировал с использованием синтаксиса, style="{color:green;} :hover { color: red; }"и Firefox удалось покрасить ссылку в зеленый цвет, но проигнорировал наведение. Хром проигнорировал оба. Продолжать тестирование было бы бессмысленно.

Джонатан Финглэнд

9

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

Като

5

Почему длинный ответ: ты не должен ... ты ... ты не должен обобщать. Я пытался отправлять сообщения электронной почты с помощью html, но угадайте, что ... Gmail удаляет все теги стилей, все внешние ссылки на стили и все сценарии. Итак ... есть ли способ стилизовать парящий цвет ссылок внутри писем, отправляемых в Gmail? Надеюсь, что это так ... Надежда умирает последним !!! =)

Мигель Анджело

435

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

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

Развернуть фрагмент

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

Алекс С
источник

12

это умно! Работает и для эффекта наведения цвета фона<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...

mxro

46

Надо смеяться над тем, что его считают «умным» :) Трудно представить, что некоторых людей не было рядом, когда это был выдающийся / единственный способ добиться этого эффекта. Или, что еще хуже, иметь «изображение» и менять изображение, чтобы получить эффект «зависания». Заставляет меня чувствовать себя старым! Но достаточно сказать, что он отвечает на вопрос ОП :)

Manachi

5

Я должен согласиться с Маначи в этом. Это похоже на воспоминания о 90-х годах в javascript для геоклубов; P

Эрик Кастро

9

Старый, новый, древний или впереди. Он ответил на вопрос и помог мне. Спасибо, @peter.

user2060451 19.09.16

4

Мне нужно было сделать это для электронной почты, и это сработало. Спасибо! Это фактически решает вопрос, в отличие от принятого ответа.

августа

53

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

fuddin
источник

3

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

Амр Элгархи

2

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

Фуддин

2

Я проверил это:

<a href="http://www.w3.org/"           style="{color: #900}           :link {background: #ff0}           :visited {background: #fff}           :hover {outline: thin red solid}           :active {background: #00f}">...</a>

но это не сработало

Амр Элгархи

5

В случае, если кто-нибудь сталкивается с этим ответом, ответчик разместил вопрос об этой функции здесь: stackoverflow.com/questions/9884182/…

BoltClock

9

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

Илья Стрельцын

34

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

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

lukesrw
источник

4

Спасибо. Это отличный ответ, я думаю, что этот ответ должен быть решением.

Ованнес Саргсян

64

Нет, OP сказал, что они хотят встроенный CSS внутри атрибута стиля HTML .

июня

3

Я знаю, jj_, однако этот метод позволяет вам помещать в CSS только несколько строк и использовать его снова и снова во многих местах, многие люди (включая меня) считают это полезной альтернативой.

lukesrw

2

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

Айко Корюн

4

Это просто «нормальный» способ сделать это, и все говорили, что это правильный путь. Однако это не встроенный способ, который был оригинальным запросом OP.

wcndave

31

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

selector {rules}

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

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

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

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

Рекс М
источник

3

На самом деле вы не можете: «HTML разрешает любое количество элементов STYLE в разделе HEAD документа». ( w3.org/TR/html4/present/styles.html#edef-STYLE )

Эрик Араужо,

2

Работает на моей машине. Спасибо!

Джош Хабдас

@ ÉricAraujo: Затем оберните все это содержимое <html> </html>тегом

fuddin

30

используя 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"

T.Todua
источник

3

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

Билл

1

Ничего себе, это нестандартное мышление ... Мне это нравится!

theglossy1

14

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

<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'
}

Развернуть фрагмент

user1476842
источник

10

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

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

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

inkedmn
источник

4

Эта идея, к счастью, будет отброшена. (См. Lists.w3.org/Archives/Public/www-style/2009Jun/0341.html , в разделе «Заброшенные рабочие

проекты

3

Eсть . отсутствует в этом ответе.

Джоэл

9

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

style="cursor: pointer;"

резерфорд
источник

2

это должен быть лучший ответ

Владислав Гуляев

6

<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover - это псевдокласс, поэтому его нельзя применять с атрибутом стиля. Это часть селектора.

Joel
источник

2

@Derek в случае, если он по-прежнему интересен / для всех, кто читает: «~ /» (косая черта тильды) - это ссылка на стороне сервера на корень приложения в веб-приложениях asp.net. (Корень приложения может быть подпапкой, конечно). Его использование здесь не было бы правильным, поэтому причина, по которой ответ был отредактирован, так как вы задали вопрос (я подозреваю).

Крис

5

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

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

Развернуть фрагмент

источник

4

Согласно вашим комментариям, вы все равно отправляете файл JavaScript. Сделайте ролловер в JavaScript. Jquery «s $.hover()метод позволяет легко, как и любой другой обертку JavaScript. В прямом JavaScript это тоже не сложно.

Vineel Shah
источник

Хотя это

обходной путь,

4

Нет способа сделать это. Ваши варианты - использовать блок JavaScript или CSS.

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

m_vitaly
источник

2

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

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

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

Лиз
источник

1

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

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

Jaysn
источник

0

Это довольно поздно в игре, но когда бы вы использовали 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

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

Я определил некоторые цвета и передал их в шаблон руля для каждого элемента. В верхней части шаблона я определил тег стиля и добавил свой собственный класс и цвет при наведении.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Затем я использовал стиль в шаблоне:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

Вам может не понадобиться !important

webhound
источник

0

Вы можете написать код в различном типе

сначала я могу написать это

HTML

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

CSS

.one{
  text-decoration: none;
}

ты можешь попробовать другой способ

HTML

<a href="https://www.google.com/" class="one">Hello siraj</a>

CSS

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

Вы также можете попробовать навести курсор в JQuery

сценарий Java

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

HTML

<p>Hover the mouse pointer over this paragraph.</p>

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

Сирадж Ахмед
источник

Пожалуйста, не

публикуйте

Хорошо, сэр Симас-Джонелиунас

Сирадж Ахмед

Ни один из этих подходов не решает проблему, выраженную в вопросе. Вы вообще не можете использовать JS в электронной почте в формате HTML, а другой предлагаемый вами подход использует классы, которые явно исключены.

Квентин

0

Теперь это возможно с Hacss .

Ник Сондерс
источник

-1

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

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

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>

Развернуть фрагмент

BananaAcid
источник

-2

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

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

user1466310
источник

Конечно, вам не нужны внешние листы, просто используйте styleтег.

Дмитрий Зайцев

-2

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

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

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

ошибка
источник

-3

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

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

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

Йохем Геуссенс
источник

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

Ответы:

используя Javascript: