изменение фона поля при наведении (HTML, CSS) - PullRequest
Новая
       11

изменение фона поля при наведении (HTML, CSS)

0 голосов
/ 20 февраля 2019

Я боролся с этим в течение нескольких дней и не могу найти ответ: я пытаюсь просто изменить фон окна при наведении курсора.Мне удалось сделать это для текста, но остальная часть окна не меняется.

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

Вот текущеекод у меня есть: HTML 

<html lang="en">
  <head>

    <link rel="stylesheet" type="text/css" href="spanish.css"
    media="all and (min-width: 1300px)"  />

    <div class="pricebox1">
      <a href="">Conversational Spanish</a>
    </div>

  </body>
</html>

CSS 

.pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1 :hover {
  background: #ffffff;
  color: red;

Что я делаю не так?

Ответы [ 4 ]

0 голосов
/ 20 февраля 2019

Ваш код .pricebox1 :hover не выбирает состояние :hover для .pricebox1.Это указывает на :hover состояние детей .pricebox1.Следовательно, он не меняет цвет блока.

Если вы хотите, чтобы дочернее состояние hover изменило фон родительского объекта, это невозможно, поскольку «Каскадные таблицы стилей поддерживают только стили в каскадном режиме».направление, а не вверх "

Итак, вы можете использовать .pricebox1:hover для изменения цвета фона pricebox1 и .pricebox1:hover a для обновления стилей a внутри.

Вы можете использовать обходной путьрешение для него здесь

В противном случае вам нужно использовать Javascript для обновления стиля родителя при наведении курсора, а не только на css

0 голосов
/ 20 февраля 2019

Избегайте пробелов в .pricebox1 :hover - установите .pricebox1:hover для изменения фона для .pricebox1 при наведении.

Вам нужно будет создать отдельное правило a:hover для ссылки, а затемизменить цвет текста.

0 голосов
/ 20 февраля 2019

С моей стороны код работает нормально.Единственное, что вам нужно изменить - это якорь внутри .pricebox1, так как у него есть defaultling styling.eg 

.pricebox1 a:hover{
   color: red;
}
0 голосов
/ 20 февраля 2019

Это?В .pricebox1 :hover {} это не background, а background-color

    .pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1:hover {
  background-color: white;
  color: red;
}
<div class="pricebox1">
    <a href="">Conversational Spanish</a>
    </div>

И если вы хотите изменить цвет текста одновременно, просто выполните: 

.pricebox1 > a:hover{
  color: red;
}


    .pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1:hover {
  background-color: white;
}

.pricebox1 > a:hover{
  color: red;
}
<div class="pricebox1">
    <a href="">Conversational Spanish</a>
    </div>
...