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

861

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

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

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

  • 168
    PS. Существует очень веская причина использовать только встроенный, а не CSS; если вы создаете HTML-письма с новостями по электронной почте, так как теперь Gmail поддерживает только встроенные стили и удаляет теги ID и блоки стилей
  • 21
    Встраивание html в приложения для ведения блогов также часто требует эксклюзивного использования встроенных стилей. Особенно, если вы встраиваете html через сторонний клиент и не имеете доступа к темам пользователя.
Показать ещё 4 комментария
Теги:
inline-styles

22 ответа

517
Лучший ответ

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

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

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

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

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

См. Полностью Pwn CSS с Javascript для хорошего script при динамическом добавлении правил 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.

Поделиться
  • 1
    да, держите без встроенного CSS, и вы готовы.
  • 1
    проблема в том, что я не могу этого сделать, я отправляю файл javascript в ответе http, а js создает html-код и встроенный файл css и не может отправить другой файл. я знаю на 100%, что лучше использовать файлы таблиц стилей
Показать ещё 31 комментарий
368

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

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

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

Поделиться
  • 11
    это умно! Также работает для эффекта наведения фона на цвет <div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
  • 0
    Во-первых, спасибо, а затем есть ли li.selected {...} трюк для написания li.selected {...} во встроенном стиле?
Показать ещё 5 комментариев
45

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

Поделиться
  • 3
    во всех остальных ответах говорилось, что это невозможно, но ваши показывают, что это возможно, ваш ответ другой, я проверяю это.
  • 0
    На самом деле мне нужно то же самое, что и вы. Я проверил это, но у меня это не сработало. Но я все еще думаю, что это должно работать как его w3c.
Показать ещё 12 комментариев
32

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

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

Поделиться
  • 2
    Спасибо. Это отличный ответ, я думаю, что этот ответ должен быть решением.
  • 1
    Спасибо sarhov, надеюсь, люди увидят это, если им это нужно.
Показать ещё 9 комментариев
27

используя Javascript:

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

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

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

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"

Поделиться
  • 3
    Поскольку этот ответ был отредактирован, теперь он, похоже, совершенно не имеет отношения к первоначальному вопросу ...
  • 1
    Ничего себе, это нестандартное мышление ... Мне это нравится!
27

Вы не можете делать то, что вы описываете, поскольку 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 )
  • 1
    Работает на моей машине. Спасибо!
Показать ещё 1 комментарий
10

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

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

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
Поделиться
6

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

style="cursor: pointer;"
Поделиться
  • 1
    это должен быть лучший ответ
5 
<style>a:hover { }</style>
<a href="/">Go Home</a>

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

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

Вы можете сделать это. Но не в встроенных стилях. Вы можете использовать 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 $.hover() метод упрощает работу, как и всякая другая оболочка JavaScript. Это не слишком сложно в прямом JavaScript.

Поделиться
  • 0
    Хотя это обходной путь, но он представляет собой очень хороший ответ для меня и лучший ответ, если на самом деле невозможно написать inline hover
4

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

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

Поделиться
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

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

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

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

Поделиться
1

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

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

Поделиться
0

Я должен был избежать 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>
Поделиться
0

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

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

<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

Поделиться
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

Вы МОЖЕТЕ использовать JavaScript только в случае неудачи. Это не самое практичное решение, но оно может служить вашим целям.

Поделиться
-2

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

a:hover {color:#FF00FF;}   /* Mouse-over link */
Поделиться
  • 0
    Конечно, вам не нужны внешние листы, просто используйте тег style .
-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>

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

Поделиться
-3

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

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню