Как изменить цвет текста у ссылки при наведении на родительский элемент li?

Question

[sunnyrio]

Есть меню в виде списка в каждом элементе li содержится ссылка, цвет текста ссылки меняется при наведении на саму ссылку, как сделать чтобы он менялся когда курсор находиться на элементе li?

Меню:

<div class=".b-menu-container--nav">
<ul>
<li><a href=#'>пункт1</a></li>
<li><a href=#'>пункт2</a></li>
</ul>
</div>

Вот css:

.b-menu-container--nav li:hover, .b-menu-container--nav a:hover{
    transition: background-color 200ms ease-in-out;
    transition-property: background-color;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
    transition-delay: initial;
	background-color: #f3f3f3;
	color: rgba(51,168,172,0.8);
	cursor: pointer;
	}

Comments

[Froggyweb]

.b-menu-container--nav li:hover, .b-menu-container--nav a:hover

Это БЭМ :)

[Klein Maximus]

Froggyweb, а при чем тут БЭМ?

Answer 1

[Klein Maximus]

Убрать точку в имени класса в html и добавить .b-menu-container--nav li:hover a
https://jsfiddle.net/5tdesdsw/

Comments

[sunnyrio]

Спасибо помогло

Answer 2

[anlamas]

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

// и вместо 
.b-menu-container--nav li:hover, .b-menu-container--nav a:hover {}
// это
.b-menu-container--nav li:hover a {}

Comments

[sunnyrio]

Подскажи а как сделать чтобы ссылка растянулась на весь элемент li?