Как можно корректно реализовать смену фона у родительского блока (отмечен пунктирными линиями) при наведении курсора на синий круг?
Напрашивается сделать общий фон картинку с отдельными участками измененных областей для режима hover родительских блоков.
Как корректно сделать привязку кругов и родительских фонов?
Смысл в том, что при наведении на фоне появляются изменения. Разметка изначальная:
<ul class="picture">
<li class="block-link1">
<a href="#">
<img class="icon-link" src="" />
</a>
</li>
<li class="block-link2">
<a href="#">
<img class="icon-link" src="" />
</a>
</li>
<li class="block-link2">
<a href="#">
<img class="icon-link" src="" />
</a>
</li>
</ul>