html — Подчеркивание текста ссылок при наведении
Вопрос задан
Изменён 7 лет 2 месяца назад
Просмотрен 7k раза
Как сделать подчеркивание текста ссылки:
<ul>
<li>
<a href="">Текст</a>
</li>
<ul>
Если элементы списка представлены inline-block‘ом и подчеркивание распространяется на весь блок?
- html
- css
2
Используйте text-decoration: underline;
На него не влияет свойство display;
HTML:
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
CSS:
ul li {
display: inline-block;
}
ul li:hover {
text-decoration: underline;
}
Пример в fiddle
Также возможно:
Пример 1 — использовать border
ul{
padding-left: 0;
text-align: center;
}
ul > li{
display: inline-block;
vertical-align: top;
margin: 0 15px;
}
ul > li a{
text-decoration: none;
font-size: 15px;
font-family: 'segoe ui';
color: #000;
border-bottom: 2px solid transparent;
}
ul > li a:hover{
border-bottom: 2px solid #f00; /* вместо этого цвета можно использовать любой другой */
}<ul>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<ul>Пример 2 — использовать псевдоэлементы — :before or :after
ul{
padding-left: 0;
text-align: center;
}
ul > li{
display: inline-block;
vertical-align: top;
margin: 0 15px;
}
ul > li a{
text-decoration: none;
font-size: 15px;
font-family: 'segoe ui';
color: #000;
position: relative;
}
ul > li a:hover:after{
content: '';
position: absolute; bottom: 0; left: 0;
width: 100%;
height: 2px;
background: #f00;
}<ul>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<ul>
Зарегистрируйтесь или войдите
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Состояния ссылок на CSS | Трепачёв Дмитрий
Я думаю, что вы, посещая различные сайты
в интернете, обращали внимание на то, что
ссылки обычно реагируют на наведение мышкой
на них.
Такого эффекта можно добиться, задавая
поведение ссылок в различных состояниях.
К примеру, вот так — a:hover — мы
поймаем состояние, когда на ссылку навели
курсор мышки. В этот момент мы можем, к примеру,
поменять цвет ссылки или убрать/добавить
ей подчеркивание. Конструкция :hover
Кроме :hover есть еще псевдоклассы :link, которые отлавливают не посещенную
ссылку, и :visited, которые отлавливают
посещенную ссылку. На некоторых сайтах с
их помощью показывают пользователям, где
они были, а где — нет. Есть еще и псевдокласс :active, который отлавливает следующее
состояние: на элемент нажали мышкой, но
еще не отпустили.
В следующем примере для ссылки в состоянии :hover убирается подчеркивание, в
состоянии :link задается красный цвет,
в состоянии :visited — зеленый, в :active
В результате получится,
что в начале ссылка будет красного цвета,
после нажатия на нее — зеленого, если нажать
на нее мышкой и не отпускать — голубого,
а если навести мышкой — станет неподчеркнутой.a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
a:active {
color: blue;
}<a href="#">ссылка</a>
:
Нюансы
Псевдоклассы наследуют друг от друга. К примеру,
если я уберу подчеркивание для состояния
Из-за наследования для корректной работы
данные псевдоклассы следует размещать именно
в таком порядке, как в примере: :link, :visited, :hover, :active (ненужные можно не писать). Этот порядок
подчиняется следующему мнемоническому правилу: LoVe HAte.
Сделайте все ссылки в состоянии :hover красными и неподчеркнутыми, в состоянии :link — голубыми, в состоянии :visited
:active — черными.Состояния link и visited
Часто состояния :link и :visited объединяют вместе через запятую:
a:link, a:visited {
color: red;
}
a:hover {
text-decoration: none;
}
a:active {
color: blue;
}<a href="#">ссылка</a>
:
В таком случае можно их вообще и не указывать:
a {
color: red;
}
a:hover {
text-decoration: none;
}
a:active {
color: blue;
}
<a href="#">ссылка</a>:
Обычное использование
Как правило, указываются состояния для всех типов ссылок одновременно, а потом ниже добавляются особенности поведения ссылки при наведении мышкой, вот так:
a {
color: red;
}
a:hover {
text-decoration: none;
}<a href="#">ссылка</a>
:
Сделайте все ссылки во всех состояниях голубыми
и неподчеркнутыми, а в состоянии :hover — красными и подчеркнутыми.
html — Как создать эффект подчеркивания для зависших ссылок в CSS?
спросил
Изменено 2 месяца назад
Просмотрено 13 тысяч раз
Я пытаюсь добиться такого стиля:
Как создать этот эффект с помощью CSS? 9
Используя :hover и установив border-bottom . Что-то вроде этого
ул{
стиль списка: нет;
заполнение: 0;
маржа: 0;
}
уль ли {
плыть налево;
поле: 0 5px;
}
уль ли а {
текстовое оформление: нет;
черный цвет;
}
уль ли: наведите {
нижняя граница: 2 пикселя сплошного красного цвета;
} <ул>
а {
отображение: встроенный блок;
положение: родственник;
текстовое оформление: нет;
выравнивание текста: по центру;
}
а: наведите: до {
содержание: '';
ширина: 100%;
высота: 100%;
положение: абсолютное;
слева: 0;
внизу: 0;
box-shadow: вставка 0 -10px 0 #11c0e5;
}
промежуток {
дисплей: блок;
ширина: 100 пикселей;
высота: 40 пикселей;
цвет фона: красный;
отступы сверху: 20px;
} тексты ссылок
3
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
html — Как убрать подчеркивание имени при наведении
спросил
Изменено 5 месяцев назад
Просмотрено 251 тысяч раз
У меня такой html:
легенда.зеленый-цвет{ цвет:зеленый; }
В моем случае Раздел выглядит зеленым, но когда я навожу на него указатель мыши, он становится похожим на href, но я хочу, чтобы он оставался таким же, без подчеркивания и изменения цвета.
Можно ли добиться без изменения CSS или с минимальным изменением CSS?
или может быть как-то с jquery?
- html
- css
попробуйте это:
legend.green-color a:hover{
текстовое оформление: нет;
}
2
Удалить текстовое оформление тега привязки
Раздел
1
Для этого вы можете использовать CSS под legend.green-color a:hover .
legend.green-color a:hover {
цвет:зеленый;
текстовое оформление: нет;
}
Чтобы сохранить цвет и не подчеркивать ссылку:
legend.
