Як написати: наведіть курсор на вбудований CSS?

1015

У мене є випадок, коли я повинен написати вбудований 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
О, давай. Іноді ви просто будуєте прототип цільової сторінки, і вам не хочеться роздрібнювати таблиці стилів або створювати нову гілку шаблону або що-небудь просто, щоб перевірити, чи працює зелена кнопка краще. Шиш.
— ElBel
1
@FriendlyNeighborhoodIdiot Цій сторінці виповнилося 13 років, з цього часу проект був покинутий.
— Тофандель

Відповіді:

574

Коротка відповідь: не можна.

Довга відповідь: не слід.

Дайте йому ім’я або ідентифікатор класу та використовуйте таблиці стилів для застосування стилю.

:hoverє псевдоселектором, і для CSS має значення лише у таблиці стилів. Не існує жодного еквівалента стилю вбудованого тексту (оскільки він не визначає критерії вибору).

Відповідь на коментарі ОП:

Див. Розділ 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
— Джонатан Фінгленд
203
Є й інші обставини, коли вбудований CSS є єдиним варіантом - наприклад, HTML-повідомлення електронної пошти (наприклад, Gmail ігнорує CSS, якщо він не є вбудованим). На жаль, з Javascript, позбавлений більшості клієнтів електронної пошти, я ще не знайшов способу додавання: наведення курсових ефектів.
— Саймон Схід
24
@Kato, хоча це чудова посилання, і я дуже хочу, щоб це працювало, на жаль, це не так. Тільки для підтвердження, я перевірив, використовуючи синтаксис style="{color:green;} :hover { color: red; }"і firefox, вдалося пофарбувати посилання зеленим, але ігнорував наведення. Chrome ігнорував обидва. Продовження тестування було б досить безглуздим.
— Джонатан Фінгленд
9
Я не заявив це як робоче рішення. Я заявив, що не "цілком" правильно сказати, що немає вбудованого еквівалента, і що псевдоселектори не мають значення поза таблицями стилів. Як це недоречно?
— Като
5
Чому довга відповідь: Ти не повинен ... ти ... ти не повинен узагальнювати. Я намагався надсилати електронні повідомлення з html, але здогадайтесь, що ... gmail видаляє всі теги стилів, усі зовнішні посилання на стиль та всі сценарії. Отже ... чи є спосіб навести наведення кольору на посилання всередині електронних листів, надісланих на Gmail? Сподіваюсь, це так ... надія остання померла !!! =)
— Мігель Анджело,
433

Ви можете отримати той же ефект, змінивши стилі з 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
Сміятись з того, що це сприймається як "розумний" :) Важко уявити, що деяких людей не було поруч, коли це було найвидатнішим / єдиним способом, як можна досягти цього ефекту. Або ще гірше - мати "образ" і змінити зображення, просто щоб дати ефект "наведення". Змушує мене відчувати себе старим! Але достатньо сказати, що це відповідає на питання ОП :)
— Маначі
5
Я повинен погодитися з Маначі на цьому. Це як спалах у javascript для географічних районів 90-х; P
— Ерік Кастро
9
Старе, нове, давнє чи попереду. Це відповіло на питання і допомогло мені. Дякую, @peter.
— користувач2060451
4
Мені потрібно було це зробити на електронний лист, і воно спрацювало. Дякую! Це фактично вирішує питання, на відміну від прийнятої відповіді.
— ThetherSide
53

Ви могли це зробити в якийсь момент минулого. Але зараз (згідно з останньою редакцією того ж стандарту, яка є Рекомендацією щодо кандидата), ви не можете.

— фуддін
джерело
3
всі інші відповіді казали, що це неможливо, але ваша покажіть, що це можливо, ваша відповідь інша, я тестую її.
— Amr Elgarhy
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
Розгорніть фрагмент

У цьому випадку вбудований код: "color-color: red;" - це колір перемикача на наведення курсора, помістіть потрібний вам колір і тоді це рішення працює. Я усвідомлюю, що це може бути не ідеальним рішенням щодо сумісності, але це працює, якщо це абсолютно необхідно.

— lukesrw
джерело
4
Дякую. Це чудова відповідь, я думаю, що ця відповідь має бути вирішенням.
— Ованнес Саркісян
63
Ні, ОП сказали, що хочуть це вбудований CSS в атрибуті стилю HTML .
— jj_
3
Я знаю, jj_- проте цей метод дозволяє помістити в CSS лише кілька рядків і використовувати його знову і знову в багатьох місцях, багато людей (в тому числі і я) вважають це корисною альтернативою.
— lukesrw
2
це має бути фактична відповідь, з невеликою модифікацією: не встановлюйте жодного з кольорів у стилі, просто правило успадковувати від батьків при наведенні, а потім встановлюйте два кольори в рядку.
— Хайко Корюн
4
Це просто "нормальний" спосіб зробити це, про який всі говорили, що це правильний шлях. Однак це не вбудований спосіб, яким був оригінальний запит ОП.
— 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"

— Т.Тодуа
джерело
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'
}
Розгорніть фрагмент

— користувач1476842
джерело
10

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

Наразі, найкраще вам, можливо, просто визначити блок стилів безпосередньо над посиланням, яке ви хочете створити:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
— inkedmn
джерело
4
Ця ідея, на щастя, відпаде. (Див. Списки.w3.org/Archives/Public/www-style/2009Jun/0341.html , у розділі "Занедбані робочі чернетки".)
— Ms2ger
3
Є. відсутні у цій відповіді.
— Джоель
9

Як вказувалося, ви не можете встановити довільні вбудовані стилі для наведення курсора, але ви можете змінити стиль курсору наведення курсору в CSS, використовуючи наступне у відповідному тезі:

style="cursor: pointer;"
— Резерфорд
джерело
2
це має бути найкращою відповіддю
— Владислав Гуляєв
6 
<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover - це псевдоклас, і тому його не можна застосувати з атрибутом стилю. Це частина селектора.

— Джоель
джерело
2
@Derek у випадку, коли все ще цікавить / для когось іншого, хто читає: "~ /" (нахил нахилу вперед) - це посилання на стороні сервера на корінь програми у веб-додатках asp.net. (Корінь програми може бути, звичайно, підпапкою). Використання тут не було б правильним, звідси причина редагування відповіді, оскільки ви задали це питання (я підозрюю).
— Кріс
5

Ви можете це зробити. Але не в inline стилях. Ви можете використовувати 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
джерело
Хоча це робота навколо, але це здається дуже гарною відповіддю для мене і найкращою відповіддю, якщо насправді неможливо написати Inline Hover
— Amr Elgarhy
4

Немає цього зробити. Ваші варіанти - використовувати JavaScript або блок CSS.

Можливо, є якась бібліотека JavaScript, яка перетворить атрибут власного стилю в блок стилів. Але тоді код не буде відповідати стандарту.

— m_vitaly
джерело
2

Я просто придумав інше рішення.

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

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

— Ліз
джерело
1

Я погоджуюся з тінню . Ви можете використовувати onmouseoverі onmouseoutevent, щоб змінити CSS через JavaScript.

І не кажіть, що людям потрібно активувати JavaScript. Це лише питання стилю, тому не має значення, чи є деякі відвідувачі без JavaScript;) Хоча більшість Web 2.0 працює з JavaScript. Дивіться, наприклад, Facebook (багато JavaScript) або Myspace .

— Джейсн
джерело
0

Це досить пізно в грі, але коли ви використовуєте JavaScript в HTML-електронній пошті? Наприклад, у компанії, в якій я зараз працюю (римується з Abodee), ми використовуємо найменший загальний знаменник для більшості маркетингових кампаній електронної пошти - а JavaScript просто не використовується. Колись. Якщо ви не маєте на увазі якусь попередню обробку.

Як згадується у відповідному дописі: "Lotus Notes, Mozilla Thunderbird, Outlook Express і Windows Live Mail, схоже, підтримують певне виконання JavaScript. Нічого іншого не робить".

Посилання на статтю, з якої це було взято: [ http://en.wikipedia.org/wiki/Comppare_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, який використовується у форматі HTML, а інший запропонований вами підхід використовує класи, які явно виключаються.
— Квентін
-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>
Розгорніть фрагмент

— Бананова кислота
джерело
-2

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

a:hover {color:#FF00FF;}   /* Mouse-over link */
— користувач1466310
джерело
Звичайно, зовнішні аркуші вам не потрібні, просто використовуйте 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>

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

— Йохем Геуссенс
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.