Вопрос по css, inline-styles, html – Как написать: hover во встроенном CSS?

883

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

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

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

Ох, давай. Иногда вы просто создаете прототип целевой страницы и не хотите переходить к созданию таблиц стилей или создавать новую ветвь шаблона или что-то еще, чтобы просто проверить, работает ли зеленая кнопка лучше. Sheesh. ElBel
Встраивание html в приложения для ведения блогов также часто требует эксклюзивного использования встроенных стилей. Особенно, если вы внедряете html через сторонний клиент и не имеете доступа к темам пользователя. providence
Для этого есть предложенный стандарт CSS; не знаю, какую поддержку браузера он может иметь (подсказка: они могут использовать пользовательские теги, такие как -moz и т. д.):w3.org/TR/2002/WD-css-style-attr-20020515 Kato
PS. Существует очень веская причина использовать только встроенный, а не CSS; если вы создаете HTML-письма с новостями по электронной почте, так как Gmail теперь поддерживает только встроенные стили и удаляет теги ID и блоки стилей user386301
@FriendlyNeighborhoodIdiot Этой странице 13 лет, с тех пор черновик был заброшен. Tofandel

Ваш Ответ

21   ответ
7

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

style="cursor: pointer;"
это должен быть лучший ответ
7

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

-2

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

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

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

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& APOS; s$.hover() Метод делает это легко, как и любая другая оболочка JavaScript. В прямом JavaScript это тоже не сложно.

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

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

Как упоминалось в соответствующем сообщении: «Lotus Notes, Mozilla Thunderbird, Outlook Express и Windows Live Mail, похоже, поддерживают некое выполнение JavaScript. Ничего другого. & Quot;

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

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

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

1

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

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

374

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

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

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

Мне нужно было сделать это для электронной почты, и это сработало. Спасибо! Это фактически решает вопрос, в отличие от принятого ответа.
это умно! Работает также для эффекта наведения фона<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
Я должен согласиться с Маначи в этом. Это похоже на воспоминания о 90-х годах.
Надо смеяться над тем, что это воспринимается как «умный» :) Трудно представить, что некоторые люди не были рядом, когда это был выдающийся / единственный способ добиться этого эффекта. Или, что еще хуже, иметь «изображение»; и должны поменять изображение, просто чтобы всплыть эффект. Заставляет меня чувствовать себя старым! Но достаточно сказать, что он отвечает на вопрос ОП :)
Старый, новый, древний или впереди. Он ответил на вопрос и помог мне. Спасибо, @peter.
-2

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

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

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

48

Вы могли бы сделать это f the same standard, which is Candidate Recommendation) you can't .

во всех остальных ответах говорилось, что это невозможно, но ваши показывают, что это возможно, ваш ответ другой, я проверяю это. Amr Elgarhy
Точнее сказать, тыcould сделать это в какой-то момент в прошлом. Но сейчас (согласно последней редакции того же стандарта, который является Рекомендацией кандидата)you can't.
Я проверил это:<a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a>  Но это не сработало Amr Elgarhy
Извините, я только что проверил дату статьи. Его 10 лет. Так что нет никаких гарантий, что это должно работать. Если это так, пожалуйста, скажите мне тоже.
В случае, если кто-нибудь сталкивается с этим ответом, ответчик разместил вопрос об этой функции здесь:stackoverflow.com/questions/9884182/…
4

или CSS.

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

503

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

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

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

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

Я не утверждал, что это рабочее решение. Я заявил, что это "не" полностью " правильно сказать, что встроенного эквивалента нет и что псевдоселекторы не имеют смысла вне таблиц стилей. Как это неуместно?
@ Като, хотя это отличная ссылка, и я очень хочу, чтобы она работала, к сожалению, это не так. Просто чтобы подтвердить, я тестировал с использованием синтаксисаstyle="{color:green;} :hover { color: red; }" и Firefox удалось покрасить ссылку в зеленый цвет, но проигнорировал зависание. Хром проигнорировал оба. Продолжать тестирование было бы бессмысленно.
Существуют и другие обстоятельства, когда встроенный CSS являетсяonly опция - например, электронные письма HTML (например, Gmail игнорирует CSS, если он не встроен). К сожалению, с отключенным Javascript в большинстве почтовых клиентов, я еще не нашел способ добавить: эффекты при наведении.
Это верно, ни один браузер, похоже, еще не начал поддерживать этот синтаксис.It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress." :-) Мне бы очень хотелось, чтобы это было реализовано, поскольку сейчас я также работаю с новостными письмами.
Вы можете добавить классы CSS в JavaScript
10

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

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

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
Eсть . отсутствует в этом ответе.
Эта идея, к счастью, будет отброшена. (Увидетьlists.w3.org/Archives/Public/www-style/2009Jun/0341.html под "Заброшенными рабочими черновиками".)
0

но мог пойти с кодом на стороне сервера.

поэтому я сгенерировал идентификатор, создал блок стиля, сгенерировал ссылку с этим идентификатором. Да, это действительный 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>

25

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

selector {rules}

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

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

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

<html>
    <style>
    #uniqueid:hover {do:something;}
    </style>
    <a id="uniqueid">hello</a>
 </html>
На самом деле вы можете & # x2019; t: & # x201C; HTML разрешать любое количество элементов STYLE в разделе HEAD документа. & # X201D; (w3.org/TR/html4/present/styles.html#edef-STYLE)
@ & # xC9; ricAraujo: Затем оберните все это содержимое под<html> </html> тег
Работает на моей машине. Спасибо!
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

33

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

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

Спасибо sarhov, надеюсь, люди увидят это, если им это нужно.
Я знаю, jj_, однако этот метод позволяет вам помещать в CSS только несколько строк и использовать его снова и снова во многих местах, многие люди (включая меня) считают это полезной альтернативой.
это должен быть фактический ответ с небольшой модификацией: не устанавливайте ни один из цветов в стиле, просто правило наследовать от родителя при наведении, а затем установить два цвета в строке.
Спасибо. Это отличный ответ, я думаю, что этот ответ должен быть решением.
Нет, ОП сказал, что они этого хотелиin inline CSS inside the HTML style attribute.
28
using 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',''); };

Note: multi-word styles (i.e.font-size) in Javascript are written together:

element.style.fontSize="12px"

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

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

a:hover {color:#FF00FF;}   /* Mouse-over link */
Конечно, вам не нужны внешние листы, просто используйтеstyle тег.
4
<style>a:hover { }</style>
<a href="/">Go Home</a>

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

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

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

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

Похожие вопросы