CSS - ссылка: проблема наследования цвета наведения

Question

Я действительно смущен тем, что здесь происходит. Мне интересно, почему ссылка белая, когда курсор находится внутри кнопки, но НЕ непосредственно по ссылке? Я хочу, чтобы он был красным, а курсор находился в пределах кнопок.
Я думаю, что это происходит потому, что в этот момент страница наследуется от объявленного .links: значение цвета, но мне интересно, как мне заставить его переопределить это? Ссылки .link: hover, похоже, не передают наследование в .links a: hover (?)
Любая помощь будет принята с благодарностью !!

.links a{ 
    color:white; 
    text-decoration:none; 
} 
.links:hover{ 
    background-color:white; 
    color:red; 
} 

.links a:hover{ 
    background-color:white; 
    color:red; 
} 

https://jsfiddle.net/3dujymLk/1/

Answer 1

Ваши правила работают именно так, как вы написали их. Если вы хотите, чтобы текст a был красным при наведении курсора на весь div, для этого вам нужно правило. Добавить что-то вроде этого:

.links:hover a { 
    color: red; 
} 

Если это не очевидно, это управляет текстовым цветом ссылки при наведении над делами.