Css фон ссылки при наведении: javascript — При наведении курсора на ссылку меняется цвет фона блока

Разное 

javascript — При наведении курсора на ссылку меняется цвет фона блока

Вопрос задан

Изменён 4 года назад

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

При наведении курсора на ссылку должен меняться цвет фона блока в котором находится ссылка. Подскажите пожалуйста как это сделать! Пробовал сделать при помощи hover в итоге получается только менять фон самой ссылки но не самого блока, так суть в том что цвет должен меняться только при наведении на кнопку, а не на блок в целом.

HTML

<div>
<img src="img/4.png" alt="">
<h4>Research</h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
<a href="#">READ MORE</a>
</div>

CSS

.
 
 services_bloc {
width: 370px;
background-color: #fff;
}
.button3 {
    border: 2px solid #212121;
    color: #212121;
    display: block;
    width: 150px;
    padding: 5px 0;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
}

  • javascript
  • css
  • hover

1

Отличная нетривиальная задачка. Дело в том, что средствами css никак нельзя повлиять на родительский элемент из дочернего (зеленый фон), и сложно повлиять на соседние (белый цвет текста). У меня получилось решить её, но применить пришлось немного css-магии )) Здесь сочетание трёх идей:

  1. При ховере на кнопку (а не на ее родителя!) должны перекрашиваться ее соседи (и родитель, но это позже) — используем оператор влияния на соседние теги. Но он работает только на те, что ниже по коду, а текст у нас выше кнопки…
  2. Значит используем флекс на родителе и перевернем порядок — кнопка в коде идет первой, а отобразится последней, то что нужно!
  3. Повлиять на фон родительского блока из дочернего средствами css невозможно, но мы сделаем хитро — а не будем его менять вообще. Мы его перекроем. Пусть на ховер у кнопки возникает псевдоэлемент :after с нужным цветом фона
    , растянем его абсолютным позиционированием на всю карточку, положим под контент карточки z-index: -1 и уберем реакцию на ховер с него pointer-events: none;
  4. Готово )
.card {
  position: relative;
  width: 300px;
  margin: 20px auto;
  text-align: center;
  background-color: yellow;
}
.card__info {
  display: flex;
  position: relative;
  padding: 20px;
  flex-flow: column-reverse nowrap;
  z-index: 1;
}
.card__btn {
  display: block;
  width: 100px;
  margin: 20px auto 0;
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
}

.card__btn:hover {
  color: #fff;
  border-color: #fff;
}

.card__btn:hover ~ *{
  color: #fff;
}

.card__btn:hover:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: green;
  pointer-events: none;
  z-index: -1;
}
<div>
  <div>
    <a>Hover me!</a>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.  
      Odit expedita a voluptatum quibusdam veniam architecto in
      harum sunt ipsum dolore.
    </div>
  </div>
</div>

1

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

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

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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Links ссылки в CSS при наведении.

Уроки для начинающих академия

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

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

С CSS, ссылки могут быть стилизованы по-разному.

Text LinkText LinkLink ButtonLink Button

Укладка ссылки

Ссылки могут быть стилизованы под любое свойство CSS (например, color, font-family, background и т.д.).

Пример

a {
    color: hotpink;
}

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

Четыре ссылки состояний:

  • a:link — Обычная, непосещаемая ссылка
  • a:visited — ссылка, которую посетил пользователь
  • a:hover — ссылка, когда пользователь мыши над ним
  • a:active — Ссылка момент щелчка

Пример

/* unvisited link */
a:link {
    color: red;
}

/* visited link */

a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

При задании стиля для нескольких состояний ссылок существуют некоторые правила заказа:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

Оформление текста

Свойство text-decoration в основном используется для удаления подстрочных ссылок:

Пример

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {

    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Цвет фона

Свойство background-color может использоваться для указания цвета фона для ссылок:

Пример

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
} 

Дополнительные кнопки-ссылки

В этом примере демонстрируется более продвинутый пример, в котором мы объединяем несколько свойств CSS для отображения ссылок в виде полей/кнопок:

Пример

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

Другие примеры

Добавление различных стилей к гиперссылкам
В этом примере демонстрируется добавление других стилей к гиперссылкам.

Advanced-создание кнопки связи с границами
Еще один пример создания полей/кнопок ссылок.

Изменение курсора
Свойство Cursor указывает тип отображаемого курсора. В этом примере демонстрируются различные типы курсоров (могут быть полезны для ссылок).

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

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

html — изменить цвет фона тела при наведении на ссылку

спросил

7 лет, 6 месяцев назад

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

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

Как изменить фон страницы при наведении указателя мыши на и ? Я ищу решение только для css.

Я знаю, что вы можете получить доступ к дочерним элементам через CSS, но я понятия не имею, как/если вы можете получить доступ к телу.

  • HTML
  • CSS

3

Взгляните на это DEMO

Вот

html его часть

 ссылка 1

А вот и корпус css 

 {
        фон: голубой;
    }
    а: наведите: до {
        содержание: '';
        положение: фиксированное;
        дисплей: блок;
        сверху: 0; внизу: 0; слева: 0; справа: 0;
        z-индекс: -1;
        цвет фона: серый;
    }

2

Демонстрация Майка Росса решает вашу проблему, но не объясняет, как и почему она работает. Его также можно значительно упростить.

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

 Тест
.специальный:наведите:до{
    содержание: '';
    положение: фиксированное;
    дисплей: блок;
    сверху: 0; внизу: 0; слева: 0; справа: 0;
    z-индекс: -1;
    цвет фона: #ff0000;
}

Вам не нужно nth-of-type или что-то еще. Смотрите мою скрипку здесь. Все, что вам нужно сделать, это убедиться, что элемент «до» развернут на весь экран, находится в конце по оси z и имеет определенный цвет.

5

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

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

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

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

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

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

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

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

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

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

наведите ссылку, чтобы изменить цвет фона *PAGE* с помощью css

спросил

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

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

Можно ли изменить фон всей страницы при наведении курсора на разные ссылки в отдельном div на странице с помощью css? Я не очень разбираюсь в JS, поэтому потребуется объяснение, если JS является обязательным. Цените любую помощь. Спасибо!

  • css
  • background
  • hover

Используя только CSS, невозможно повлиять на стиль предка наведенного элемента. Ваша проблема требует JavaScript.

Что ж, это как-то возможно. На самом деле вы не будете менять фон страницы, но эффект будет аналогичным.

Взгляните на код.

 корпус {
        фон: голубой;
    }
    а: наведите: до {
        содержание: '';
        положение: абсолютное;
        дисплей: блок;
        сверху: 0; внизу: 0; слева: 0; справа: 0;
        z-индекс: -1;
    }
    li:nth-of-type(1) a:hover:before {
        цвет фона: синий;
    }
    li:nth-of-type(2) a:hover:before {
        цвет фона: красный;
    }
    li:nth-of-type(3) a:hover:before {
        цвет фона: зеленый;
    }

По сути, вам просто нужно создать псевдоэлементы, когда курсор наводится на ссылку. Этот псевдоэлемент, имеющий абсолютную позицию с верхним, нижним, левым и правым значением, равным 0, займет весь экран, и присвоение ему z-индекса -1 гарантирует, что он будет ниже всех остальных элементов на странице.

No related posts.

Автор записи

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

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