Как применить hover сразу к двум элементам в div'e?

Question

[Антон]

Как применить hover сразу к двум элементам в div'e, что бы менялся как цвет текста так и цвет картинки (PNG)?

<div class="market">
        <i class="menu-icon"></i>
			<h2><a href="#">Heading</a></h2>
        </div>

Answer 1

[Антон]

Решил методом тыка, кому интересно:

<div class="market">
			<h2><a class="menu-icon" href="#">Heading</a></h2>
        </div>

.menu-icon{
display: block;
    width: 49;
    height: 100px;
    margin: 0 auto 20px;
    background: url(img/market-img/kab.png) 0 0 no-repeat;
	background-position: center 20px;
    padding-top: 100px;
     color: #111;
    text-transform: uppercase;
}
.menu-icon:hover{
display: block;
    width: 49;
    height: 100px;
    margin: 0 auto 20px;
    background: url(img/market-img/kab-a.png) 0 0 no-repeat;
	background-position: center 20px;
    padding-top: 100px;
     color: #ffcc00;
    text-transform: uppercase;
}

Answer 2

[Кирилл]

Вы про это?

market:hover menu-icon {color: red;}
market:hover h2 a {color: red;}

Answer 3

[Алексей]

codepen.io/CreativeSeo33/pen/bVpxmR

Comments

[Антон]

Проблема в том, что там PNG файл

[Алексей]

Тогда нужно заменять другой картинкой

Answer 4

[Андрей Чернышев]

.market:hover .menu-icon, .market:hover h2 a {
  color: red;
}