: hover не изменит цвет шрифта ребенка

0

JS Fiddle

Так что да, <b> должен менять font-color всякий раз, когда он зависает, но это не так. Дело в том, что я могу заставить его работать либо

  • Удаление # sidebar в таблице стилей (например, #sidebar nav#menu)
  • или удалив #menu в nav#menu в таблице стилей

Но почему это происходит?

Кроме того, вопрос о бонусе, почему анимация границы активируется только при наведении курсора мыши, но не на мыши?

Благодарю!

Теги:

5 ответов

1
Лучший ответ

В настоящее время он меняется, но исходный цвет переопределяет текущий.

Ты можешь сделать

#yourelement:hover b{ color: red !important;}
Поделиться
  • 0
    Это имело смысл! Я не могу поверить, что я пропустил это. Спасибо!
1

http://jsfiddle.net/f33cR/ Проверьте это

Примечание. Когда вы добавляете класс типа #paren #child #element, вы применяете простой CSS, например #element dosen't, который перезаписывает этот класс. Если вы хотите перезаписать, у вас есть два варианта.

Вариант 1. #parent #child #element:hover

или

Вариант 2. #element:hover { color:red!important;}

Поделиться
1

Вы должны использовать! Важно в своем CSS из-за того, как вы написали свой CSS, он не перезапишет предопределенный цвет по умолчанию.

Быстрая и грязная (но работающая) альтернатива - просто переместить color: #555 из <b> в li

http://jsfiddle.net/f33cR/8/

Поделиться
0

Я бы написал это так

#sidebar nav#menu #home-btn:hover b { color:#ef672f; }
#sidebar nav#menu #about-btn:hover b { color:#1ba59b; }
#sidebar nav#menu #portfolio-btn:hover b { color:#4d7ba2; }
#sidebar nav#menu #resume-btn:hover b { color:#bc6538;}
#sidebar nav#menu #contact-btn:hover b { color:#79a22e; }

О бонусе, я не знаю, но вы можете лучше активировать эти действия с помощью jquery.

Поделиться
  • 0
    Спасибо! Я уже понял это, хотя. Я не знаю, что заставляет его не работать без родительских идентификаторов, когда граница работает без них
  • 0
    То есть, как говорится в выбранном вами ответе, вы должны изменить это, чтобы работать, а также пометить его как! Важно, если хотите. Но выберите тот, который вы хотите.
0

Напишите свой css так, как это

#sidebar nav#menu #home-btn:hover b { color:#ef672f; }
#sidebar nav#menu #about-btn:hover b { color:#1ba59b; }
#sidebar nav#menu #portfolio-btn:hover b { color:#4d7ba2; }
#sidebar nav#menu #resume-btn:hover b { color:#bc6538;}
#sidebar nav#menu #contact-btn:hover b { color:#79a22e; }

демонстрация

---------------

Второй вариант - пожалуйста

замените это

#sidebar nav#menu li b { font-size:1.7em;  text-align:left; color:#555; }

в этот

nav#menu li b { font-size:1.7em;  text-align:left; color:#555; }

Демонстрация 2

Поделиться
  • 0
    Спасибо! Но почему же это не работает без «#sidebar nav # menu»? разве это не должно работать без него? Как то, как граница работала без этого?
  • 0
    потому что значение id более высокого класса
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню