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

Question

[Наталия]

Все добрый день!
Есть HTML:

<div class="main-container">
   <a href="#">
     <div class="item1">
     <img src="images/image1.svg" class="images"/>
     <h4 class="text">
     Здесь некоторый текст
     </h4>
     </div>
   </a>
 <a href="#">
     <div class="item2">
     <img src="images/image2.svg" class="images"/>
     <h4 class="text">
     Здесь следующий некоторый текст
     </h4>
     </div>
   </a>
</div>

Задаю стили для ссылок в главном блоке:

main-container a :hover {
   text-decoration: none;
   border: 1px solid #9858AE;
   border-radius: 10px;
}

Но при этом такой же стиль принимают и блоки, находящиеся внутри этого главного блока, то есть при наведении на составные части (картинка и текст) - у них тоже появляется радиус с данными параметрами. А мне этого не нужно.
Подскажите, пожалуйста, как установить стили только для ссылок, а не для того, что в них находится ?
Заранее спасибо.
P.S. пробовала дополнительно так делать:

.main-container .text :hover,
.main-container img :hover {
   text-decoration: none;
   border: none;
}

но не помогает.

Answer 1

[Justin Bieber]

вытащить элементы из a

Comments

[Наталия]

мне ж нужно на каждый блок - item1 и item2 - повесить ссылку с определенным стилем при hover. А этот блок содержит другие элементы, как указано в примере.