Нужно чтобы ссылки подчёркивались пунктирной линией при наведении на неё курсора
Нужно чтобы ссылки подчёркивались пунктирной линией при наведении на неё курсора
Вопрос
Столкнулся с проблемой такого рода: значит так, есть обычные ссылки, и нужно сделать так, чтобы подчеркивание у этих ссылок было не верхним и не нижним, а в виде пунктирной линии, и чтобы при наведении на неё (ссылку) подчеркивание исчезало.
Хотя я и несовсем новичок в сайтостроении, ну вот сталкнулся с этим и стал в тупик. Возможно, ли вообще сделать такое на html, или может здесь какой-нибудь скрипт написать? Знаю, что все можно сделать, такого нет, что чего-то нельзя сделать, но как сделать, какие теги использовать?
Пока я сделал обычным подчеркиванием. Жду от вас предложений.
Ответ
Здравствуйте!
Да действительно это можно сделать, но только не с помощью скриптов(хотя через скрипты тоже можно - но нежелательно) а с помощью языка разметки Css - смотри ниже код:<html>
<head>
<style>
A
{
color: black;
text-decoration: none;
border-bottom: 1px dashed green;
}
A:hover
{
border-bottom: 0px;
}
</style>
</head><body>
<a href=1.html>Подчеркнутая ссылка</a>
</body>
</html>Так давай я те сразу поясню, что здесь к чему:
Тег <style></style> - применяется для работы Css, вот в нём то и прописываются стили.
A
{
color: black;
text-decoration: none;
border-bottom: 1px dashed green;
}
А - это мы объявляем стиль для тега “а” - тоесть для ссылок.
color: black; - прописываем чёрный цвет.
text-decoration: none; - это мы убераем подчёркивание ссылок.
border-bottom: 1px dashed green; - ВОТ ЭТО И ОТВЕЧАЕТ ЗА ПУНКТИРНОЕ ПОДЧЁРКИВАНИЕ.
Ты можеш заменить “1px” на любое своё значение, от него будет зависеть толщина подчёркивания.
Также можеш менять цвета, в данном случае там стоит зелёный цвет “green”A:hover
{
border-bottom: 0px;
}“A:hover” - это описывается действие с ссылкой после наведения на него курсором, тоесть:
border-bottom: 0px; - это обозначает, что при наведении на ссылку, рамка становится толщиной 0px; - следовательно не видемой.Так же ещё можно сделать подчёркивание не только ссылок а ещё и простого текста, смотрим пример ниже:
<html>
<head>
<style>
.underline { border-bottom: 1px dashed blue; }
</style>
</head><body>
<span class=underline>Здесль любой текст</span>
</body>
</html>
Страницы: 1 2
Оставить отзыв
Вы должны войти, чтобы оставлять комментарии.