BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Выделение цветом ссылок при наведении на параграф

Выделение цветом ссылок при наведении на параграф

2016-12-01 / Вр:10:27 / просмотров: 271

Выделение цветом ссылок при наведении на параграф

Всем привет!
Хочу вам предложить вот такой эффект, сделанный на CSS.
На сайте не будут видны ссылки, то есть, и ссылки, и текст будут одного цвета, но при наведении курсора мышки на параграф, ссылки выделятся другим цветом и пользователь увидит, где есть ссылки на сайте для перехода.
Конечно, этот эффект можно применять и для других целей, это дело фантазии.
(Ужасно интересно узнать, куда приведут вас ваши фантазии?:coffe: Пишите в комментариях)

Теперь сам код.
Добавьте вот такой CSS код:

p { color:#000; /* цвет текста */ }
a { color: red; text-decoration:underline; /* оформление ссылки при наведении на параграф мышкой*/}
a:hover { color:#000; /* цвет ссылки при наведении на ссылку */}

/* оформление ссылки в обычном состоянии */
.colorhover-bloggood a
{
text-decoration:none;
color:#000;
}

/* для браузера IE6 */
.colorhover-bloggood:hover a { color: red; text-decoration:underline; }
.colorhover-bloggood:hover a:hover { color:#000; }

Теперь HTML:

<p class="colorhover-bloggood">
Текст текст текст текст, текст текст. <a href="http://stepkinblog.ru/bootstrap/besplatnyj-kurs-po-osnovam-bootstrap3.html/" title="Бесплатный курс по основам Bootstrap3">Бесплатный курс по основам Bootstrap3</a> текст текст Текст текст текст текст текст текст текст. <a href="http://stepkinblog.ru/html/besplatnyj-kurs-po-osnovam-html.html/" title="Бесплатный курс по основам HTML">Бесплатный курс по основам HTML</a>, текст текст текст текст текст текст. Текст текст. Текст текст текст, текст текст текст текст текст, текст текст. Текст текст текст текст текст. <a href="http://bloggood.ru/effekty-dlya-sajta-2/" title="Эффекты для сайта">Эффекты для сайта</a>. Текст текст текст, текст текст текст текст текст, текст текст текст текст текст, текст текст. Текст текст текст, текст текст, <a href="http://bloggood.ru/" title="Блог Костаневича Степана">BlogGood.ru</a>, текст текст текст текст текст текст.
</p>

Сохраняем и смотрим на результат! :pop-corne:

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Выделение цветом ссылок при наведении на параграф

  1. Александр

    Здравствуйте Степан !
    Благодарю за полезный код ! :arrow:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Александр!
    Пожалуйста.

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 704
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3821