Цвет при наведении ссылки: Как плавно изменить цвет ссылки?

Разное 

hover — Как при наведении на блок, поменять цвет текста вложенных элементов на чистом CSS?

Вопрос задан

Изменён 3 года 1 месяц назад

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

Всем привет!

Необходимо сделать так, чтобы при наведении на блок менялся цвет одновременно в заголовке, тексте и псевдоэлементе. Всегда подобные вещи делала на LESS, сейчас необходимо сделать на чистом CSS.

Как записать правильно на чистом CSS?

На LESS писала, например, так:

.overview-card-item {
            margin-right: 40px; 
            width: 18%;
            display: inline-block;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
            &:hover {
                h5 {
                    color: red;
                }
                p {
                    color: red;
                }
            }

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

Пример кода на JSFiddle

  • css
  • hover

Хм, что-то я не понял сложности, ну вот так, если я вас верно понял

. overview-card-item:hover h5 {
  color: red
}
.overview-card-item:hover p {
  color: red
}

.overview-card-item {
    margin-right: 40px; 
    width: 18%;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
}
.overview-card-item:hover h5 {
    color: red;
}
.overview-card-item:hover p {
    color: red;
}

А для примера с jsfiddle так (остальные по аналогии):

.about-for-web-design .wrapper .cards .card:hover .card-title {
    color: red;
}

И результат работы LESS легко понять, если постоянно смотреть CSS в который он превращается. Будет полезно для полного понимания что на самом деле пишете.

1

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как изменить цвет ссылок — Жизнь с WordPress

Здравствуйте, дамы и господа!

Сегодня мы займемся вопросом красоты.

(Постоянные читатели блога могут обновить кэш браузера Ctrl+F5 для актуализации внешнего вида блога.)

Ранее, в нескольких статьях я уже описывал некоторые изменения, касающиеся внешнего вида сайта.

Вот эти статьи:

1. Изменяем стиль заголовка h3

2. Как изменить стиль отдельного пункта меню или отдельной рубрики

3. Как изменить заголовок на странице рубрики

4. Изменяем шрифт заголовка статей

5. Оформление формы подписки по email

Сейчас хочу изменить цвет ссылок на блоге и рассказать вам как это сделать.

Вот так выглядели ссылки на этом сайте до внесения изменений:

Как видите, достаточно бледно и незаметно. Наверное, если б не указал на эти ссылки стрелками, то из трех ссылок можно было заметить только “Читать далее”, и то потому что она выделена жирным шрифтом.

Здесь сразу приведу скрин того, что у меня получилось после изменения цвета и стиля ссылок, чтобы можно было сравнить вариант “до” и “после”.

В этом скриншоте уже не пришлось показывать стрелками где ссылки.

А какой вам вариант нравится больше?

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

Задумано – сделано. То как преобразился вид моего блога мне очень понравилось! Казалось бы такая мелочь – цвет ссылок – небольшие изменения в css-файле, а какой эффект!

Это вызвало у меня ассоциацию с макияжем у девушек. =) А если проводить более точную аналогию, то именно с подкрашивание ресниц и подчеркиванием контура глаз с помощью карандаша. (Я вот тоже подчеркнул ссылки.)

Ладно, давайте ближе к делу, что и где я изменил.

Наверняка, вы уже знаете, да и я ни один раз уже писал, что все изменения стилей производятся в файле(ах) *. css вашего шаблона WordPress. Это может быть файл 

style.css, а может быть другой(ие). Чтобы узнать это точно, нужно в браузере посмотреть код элемента ссылки.

1. Название css-файла, в котором описаны стили для ссылки (style.css).

2. При наведение указателя мыши на style.css всплывает подсказка с указанием абсолютного пути к файлу и номером строки в которой описан стиль для анализируемого элемента веб-страницы.

3. Собственно, цвет ссылки.

Какая мощная вещь – анализ кода! Все ясно – заходи в указанный файл и изменяй цвет. Но, давайте не будем спешить! Дело в том, что изменение значения цвета в указанной строке изменит цвет всех ссылок сайта.

Если вам это и надо – изменить цвет для всех ссылок сайта, то отлично. Подбирайте нужный цвет и вносите соответствующее изменение в ваш css файл.

Я же хочу оставить черным цветом ссылки в сайдбаре и ссылки-заголовки статей. Единственное – при наведении курсора сделать их зелеными. В содержимом же статьи изменить цвет на более светлый синий и так же при наведении указателя мыши – изменять на зеленый цвет.

Опять с помощью анализа элемента выясняю, что все ссылки, которые я хочу сделать светло-синими расположены в блоке <div id=”content”></div>

Чтобы изменения коснулись только ссылок внутри блока с id=”content” нужно при описании стиля написать 

#content a. Собственно, вот стили, которые я добавил: 

1

2

3

4

5

6

7

8

9

10

11

12

13

#content a {

    color: #399dda;

    border–bottom: 1px solid #c0e4fc;

    padding–bottom: 1px;

}

#content a:hover {

    color: #77c069;

    border–bottom: 1px solid #77c069;

    padding–bottom: 1px;

}

color –  понятно – цвет

border-bottom

 – граница снизу (подчеркивание), сплошное шириной в 1px, заданного цвета

padding-bottom – отступ от текста ссылки до нижней границы.

a:hover – означает, что стиль будет применен при наведении курсора мыши на ссылку.

Далее, у меня получилось, что ссылки-заголовки статей тоже расположены в блоке <div id=”content”></div> и после, вышеуказанных изменений, их вид также изменился. А все потому, что стиль для них был описан с помощью селектора .title a. 

Это означает – для всех ссылок внутри блоков с классом class=”title”. Но, приоритет селектора #content a выше, поэтому стили #content a перекрывали стили .title a.

Чтобы этого не происходило, я добавил #content перед .title a. Теперь все .title a внутри #content получат свой собственный стиль, отличный от #content a:

1

2

3

4

5

6

7

8

9

10

11

12

13

#content .title a {

    text–decoration: none;

    color: #323539;

    border–bottom: hidden;

}

#content .

title a:hover {

    text–decoration: none;

    color: #77c069;

    border–bottom: hidden;

}

И для полноты описания всех, сделанных мной, изменений приведу еще один откорректированный стиль. Он касается ссылок в сайдбаре.

1

2

3

4

5

6

7

.sidebar a:hover {

    border–bottom: 1px solid #77c069;

    padding–bottom: 1px;

    color:#77c069;

}

Теперь, при наведенном указателе мыши, ссылки в сайдбаре будут зелеными (с подчеркиванием).

Итак, подведем итог.

Для изменения цвета ссылок нужно изменить значение свойства 

color для соответствующего селектора:

a  – все ссылки;

#idname a – все ссылки внутри блока с id=”idname”;

.classname a – все ссылки внутри блока с классом classname.

При этом, приоритет #idname выше, чем у .classname

a:hover – определяет стиль элемента при наведении указателя мыши.

Спасибо за внимание! Надеюсь, понятно изложил. Жду ваших комментариев.

Link-hover-color — Textual

Стиль link-hover-color устанавливает цвет текста ссылки, когда курсор мыши находится над ссылкой.

Примечание

link-hover-color применяется только к текстовым ссылкам действия, как описано в руководстве по действиям, а не к обычным гиперссылкам.

Синтаксис 

link-hover-color:  [];

link-hover-color принимает (с необязательным уровнем прозрачности, определяемым ), который используется для определения цвета текста, заключенного в текстовые ссылки действия, когда указатель мыши находится над ним.

По умолчанию

Если не указано, ссылка Textual action будет иметь link-hover-color , установленную на white .

Пример

В приведенном ниже примере показаны некоторые ссылки, цвет которых меняется при наведении на них указателя мыши. Это также показывает, что link-hover-color не влияет на гиперссылки.

Outputlink_hover_color.pylink_hover_color.css

Примечание

Цвет фона также меняется, когда мышь перемещается по ссылкам, поскольку это поведение по умолчанию. Это можно настроить, установив link-hover-background , но в этом примере мы этого не сделали.

Примечание

Качество GIF снижено, чтобы упростить загрузку в документацию. Попробуйте запустить пример самостоятельно с помощью textual run docs/examples/styles/link_hover_color.py .

 из приложения импорта textual.app
из textual.widgets импортировать метку
класс LinkHoverColorApp (приложение):
    деф сочинить(сам):
        Ярлык выхода(
            "Посетите веб-сайт [link=https://textualize.io]Textualize[/link].",
           , # (1)!
        )
        Ярлык выхода(
            "Нажмите [@click=app. bell]здесь[/] для звука звонка.",
           , # (2)!
        )
        Ярлык выхода(
            "Вы также можете нажать [@click=app.bell]здесь[/] для звука звонка.",
           , # (3)!
        )
        Ярлык выхода(
            "[@click=app.quit]Выйти из этого приложения.[/]",
           , # (4)!
        )
приложение = LinkHoverColorApp(css_path="link_hover_color.css")
  1. Эта метка содержит гиперссылку, поэтому правило не влияет на нее.
  2. Эта метка имеет «ссылку действия», для которой можно использовать стиль link-hover-color .
  3. Эта метка имеет «ссылку действия», для которой можно использовать стиль link-hover-color .
  4. Эта метка имеет «ссылку действия», для которой можно использовать стиль link-hover-color .
 #lbl1, #lbl2 {
    цвет при наведении ссылки: красный; /* (1)! */
}
#lbl3 {
    цвет при наведении ссылки: hsl(60,100%,50%) 50%;
}
#lbl4 {
    цвет при наведении ссылки: черный;
}
  1. Это повлияет только на одну из меток, поскольку это правило влияет только на ссылки действия.

УСБ 

 link-hover-color: красный 70%;
цвет при наведении ссылки: черный;

Питон 

 widget.styles.link_hover_color = "красный 70%"
widget.styles.link_hover_color = "черный"
# Вы также можете напрямую использовать объект `Color`:
widget.styles.link_hover_color = Цвет (100, 30, 173)

См. также

  • цвет ссылки , чтобы установить цвет текста ссылки.
  • `link-hover-background, чтобы установить цвет фона текста ссылки, когда указатель мыши находится над ней.
  • `link-hover-style, чтобы установить стиль текста ссылки, когда указатель мыши находится над ней.

HTML/CSS — Цвет ссылки при наведении

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

спросил

Изменено 7 лет, 3 месяца назад

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

Этот код написан в моем CSS; что делает все ссылки на моем сайте белыми, а при наведении на них они становятся серыми.

 a:ссылка {цвет: #FFFFFF}
а: активный {цвет: #383838}
a: посетил {цвет: #FFFFFF}
а: наведите {цвет: #383838}

Вот часть моего сайта, на которой есть белые ссылки, которые становятся серыми при наведении курсора. У меня есть четыре разные ссылки на сайте, разделенные знаком «|» . Я пытаюсь сделать каждую ссылку ОСТАВАТЬСЯ белой, но менять цвет HTML всякий раз, когда на них наводят курсор… чтобы соответствовать нашему логотипу. (HTML-раздел кода с моими ссылками прикреплен ниже).

Страница 1 | Страница 2 | Страница 3 | Страница 4

Я был бы рад, если бы кто-нибудь помог мне найти очень простой способ заставить каждую ссылку, страницу 1, страницу 2, страницу 3 и страницу 4, менять разные цвета HTML при наведении на них курсора. По сути, правило или что-то, в котором говорится, что ссылка с именем Страница 1 должна быть окрашена в #C7C025 при наведении курсора… а ссылка с именем Страница 2 должна быть окрашена в цвет #950285 при наведении курсора и так далее…

Большое спасибо заранее.

No related posts.

Автор записи

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

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