Style hover a: html — Как прописать :hover внутри style=’ ‘?

Разное 

Tooltip CSS уроки для начинающих академия

❮ Назад Дальше ❯

Создание всплывающих подсказок с помощью CSS.

Демонстрация: примеры подсказок

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

Top Tooltip text

Right Tooltip text

Bottom Tooltip text

Left Tooltip text

Базовая подсказка

Создайте подсказку, которая появляется, когда пользователь перемещает указатель мыши на элемент:

Пример

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text — see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */

. tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

<div>Hover over me
  <span>Tooltip text</span>
</div>

Пример объяснено

HTML: Используйте элемент контейнера (например, <div>) и добавьте к нему класс "tooltip" . Когда пользователь наводит курсор на этот <div>, он покажет текст подсказки.

Текст подсказки помещается внутри встроенного элемента (например, <span>) с class="tooltiptext" .

CSS: Класс tooltip использует position:relative , который необходим для размещения текста подсказки (

position:absolute ). Примечание: Ниже приведены примеры размещения всплывающей подсказки.

Класс tooltiptext содержит фактический текст подсказки. Он скрыт по умолчанию и будет виден при наведении курсора (см. ниже). Мы также добавили некоторые основные стили к нему: 120пкс ширина, черный цвет фона, белый цвет текста, центрированный текст, и 5px верхней и нижней обивка.

Свойство CSS border-radius используется для добавления скругленных углов в текст подсказки.

Селектор :hover используется для отображения текста подсказки, когда пользователь перемещает указатель мыши на <div> с

class="tooltip" .

Размещение всплывающих подсказок

В этом примере подсказка помещается справа ( left:105% ) «парящего» текста (<div>). Также обратите внимание, что top:-5px используется для размещения его в середине его элемента контейнера. Мы используем число 5 , поскольку текст подсказки имеет верхний и нижний отступы 5px. Если увеличить его заполнение, также увеличьте значение свойства top, чтобы убедиться, что он остается в середине (если это то, что вы хотите). То же самое относится, если вы хотите, чтобы подсказка помещается влево.

Подсказка справа

.tooltip .tooltiptext {

    top: -5px;
    left: 105%;
}

Result:

Hover over me Tooltip text

Левая подсказка

. tooltip .tooltiptext {
    top: -5px;
    right: 105%;
}

Result:

Hover over me Tooltip text

Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, смотрите примеры ниже. Обратите внимание, что мы используем свойство margin-left со значением минус 60 пикселей. Это необходимо для центрирования всплывающей подсказки над/под текстом, наводимым курсором. Он равен половине ширины подсказки (120/2 = 60).

Верхняя подсказка

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

Result:

Hover over me Tooltip text

Нижняя подсказка

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

Result:

Hover over me Tooltip text

Стрелки подсказки

Чтобы создать стрелку, которая должна появиться с определенной стороны подсказки, добавьте «пустое» содержимое после подсказки, с классом псевдо-элемента ::after вместе со свойством content . Сама стрелка создается с использованием границ. Это сделает всплывающую подсказку похожим на пузырь речи.

В этом примере показано, как добавить стрелку в нижнюю часть подсказки:

Нижняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;

    border-color: black transparent transparent transparent;
}

Result:

Hover over me Tooltip text

Пример объяснено

Поместите стрелку в подсказку: top: 100% будет размещать стрелку в нижней части всплывающей подсказки. left: 50% будет центрировать стрелку.

Примечание: Свойство border-width определяет размер стрелки. При изменении этого параметра также измените значение margin-left. Это будет держать стрелку в центре.

border-color используется для преобразования содержимого в стрелку. Мы установили верхнюю границу черным, а остальные-прозрачными. Если бы все стороны были черные, вы бы в конечном итоге с черной квадратной коробке.

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

Верхняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

Result:

Hover over me Tooltip text

В этом примере показано, как добавить стрелку слева от подсказки:

Стрелка влево

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

Result:

Hover over me Tooltip text

В этом примере показано, как добавить стрелку справа от подсказки:

Стрелка вправо

. tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 50%;

    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

Result:

Hover over me Tooltip text

Исчезать в подсказках (анимация)

Если вы хотите, чтобы исчезать в тексте подсказки, когда он должен быть видимым, вы можете использовать CSS transition свойство вместе с opacity свойство, и перейти от полностью невидимым до 100% видимых, в число указанных секунд (1 секунды в нашем примере) :

Пример

.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
}

❮ Назад Дальше ❯

html — встроенный стиль, который действует как :hover в CSS

спросил

Изменено 1 год, 4 месяца назад

Просмотрено 375 тысяч раз

Я знаю, что встраивание стилей CSS непосредственно в теги HTML, на которые они влияют, лишает CSS большей части смысла, но иногда это полезно для целей отладки, например:

 
asdf

Какой синтаксис для встраивания правила, например:

 a:hover {text-decoration: underline;}

в атрибут стиля тега A? Это явно не этот. ..

 бар

…поскольку это будет применяться все время, а не только во время наведения.

  • HTML
  • CSS

2

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

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

Редактировать: Я только что провел быстрый тест с этим:

 < href="test.html">Тест

И это не работает в IE7, IE8 beta 2, Firefox или Chrome. Кто-нибудь еще может протестировать в других браузерах?

7

Если вы только отлаживаете, вы можете использовать javascript для изменения css:

 <а
   >бар

3

Простое решение:

 Моя ссылка

или

 <скрипт>
 /** Изменить стиль **/
 функция overStyle (объект) {
    object. style.color = 'оранжевый';
    // Изменяем некоторые другие свойства...
 }
 /** Восстанавливает стиль **/
 функция outStyle (объект) {
    object.style.color = 'оранжевый';
    // Восстанавливаем остальные...
 }

Моя ссылка

1

Если это для отладки, просто добавьте класс css для наведения (поскольку элементы могут иметь более одного класса):

 a.hovertest:hover
{
украшение текста: подчеркивание;
}
бла

1

Я собрал быстрое решение для тех, кто хочет создавать всплывающие окна при наведении без CSS, используя поведение onmouseover и onmouseout.

http://jsfiddle.net/Lk9w1mkv/

 
первое наведение курсора
вещи внутри

Если этот тег

создан из JavaScript, у вас есть другой вариант: использовать JSS для программной вставки таблиц стилей в заголовок документа. Он поддерживает '&:hover' . https://cssinjs.org/

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Переопределить стиль a:hover, чтобы он был таким же, как обычный стиль?

Задавать вопрос

спросил

Изменено 5 лет, 11 месяцев назад

Просмотрено 2к раз

У меня есть ссылка с:

  • а — цвет фона: красный;
  • a:hover — цвет фона: зеленый;

Сейчас я создаю новый глобальный класс ‘disabled’ для применения здесь и в других ссылках (с другими цветами фона), который делает следующее:

  • a. disabled — непрозрачность: 0,7; (поэтому в исходном примере отображается красный фон с непрозрачностью 0,7)
  • a.disabled:hover — то же, что и a.disabled; (исходный пример должен показывать фон красный с непрозрачностью 0,7)

По сути, отключенный класс также отключает эффект «зависания» при изменении цвета фона.

Мне трудно найти решение для этого, которое работает как глобальный класс (очевидно, если я установлю a.disabled:hover background-color: red, это сработает).

 а {
  отображение: встроенный блок;
  ширина: 300 пикселей;
  высота: 100 пикселей;
  цвет фона: красный;
  граница: 1px сплошной серый;
}

а: наведите {
  цвет фона: зеленый;
}

.инвалид {
  непрозрачность: 0,7;
}

.отключено:наведите {
  непрозрачность: 0,7;
  цвет фона: начальный;
} 
 нажмите на меня
отключил меня

Основная проблема здесь:

 .disabled:hover {
  непрозрачность: 0,7;
  цвет фона: начальный;
}

Поскольку я не могу определить значение для background-color, которое просто «обнуляет» background-color: green инструкция.

Еще раз: я знаю, что установка «красного» работает. Но у меня есть другие ссылки с синим и желтым фоном, и в этом случае это не сработает.

Есть ли какой-нибудь умный, глобальный способ добиться этого, или мне просто нужно создать разные классы .disabled для моих «синих, красных и желтых» ссылок?

  • html
  • css

Есть способ:

 a.disabled{
  события указателя: нет;
}

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

Редактировать:

Просто чтобы предотвратить наведение вашего a:hover следует изменить на это:

 а: не (. отключено): наведение

И удалите .disabled:hover

(ИЛИ)

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

 .linkBlue:hover{
  цвет фона: синий;
  }

.linkRed: наведение {
  цвет фона: красный;
  }

. linkЖелтый:наведение{
  цвет фона: желтый;
  }

.linkЗеленый:наведите{
  цвет фона: зеленый;
  }

.инвалид{
  курсор: не разрешено;
  }

.отключено
{
  события указателя: нет;
} 
 Ссылка1
Ссылка1
Ссылка1
Ссылка1

5

В соответствии со спецификацией CSS начальное значение:

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

Начальное значение свойства background-color — прозрачное. Вот почему

 .disabled:hover {
  цвет фона: начальный;
}

отличаются от ожидаемого результата.

Но можно и по другому. Не могли бы вы попробовать этот CSS. Надеюсь, это поможет.

 а: не (. отключено): наведите {
 цвет фона: зеленый;
}
.
No related posts.
Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *