Как сделать плавное появление картинки вместо другой?

Question

[Emil7676]

Нужно чтобы при наведении на class box1, появлялась картинка с классом img11 вместо img1.
HTML

<div id="main">
  <ul class="container">
      <li class="menu">      
          <ul>
		    <li class="button"><a href="#" class="box1"><img src="imeges/home1.png" class="img1"><img src="imeges/home2.png" class="img11">Главная</a></li>
            
          </ul>          
      </li>

CSS

li.button a.box1 {
    background: #313645; 
    transition: 0.6s ; 
   }
li.button a.box1:hover {
    background: #2b3140; 
   }
li.button a.box1:focus {
    background: #2b3140; 
   }

.img11 {
    right: 34px;
    position: relative;
    float: left;
    padding-right: 10px;
    bottom: 5px;
}
li.button img.img11 {
    opacity: 0%;
    transition: 0.2s;
}
li.button img.img11:hover {
    opacity: 100%
}

Сделал так, но картинка меняется только при наведении на другую картинку, а нужно чтобы при наведении на class box1, появлялась картинка с классом img11 вместо img1.

Answer 1

[Сергей delphinpro]

но картинка меняется только при наведении на другую картинку

Странно, не правда ли?

Вы написали стили, действующие при наведении на другую картинку
img.img11:hover
И, почему-то они срабатывают при наведении на другую картинку O_o
Шок! :D

Может стоит описать стили в состоянии наведения на их общий блок? Например, в вашем коде это li.button

Comments

[Emil7676]

Вот именно, это я и хотел, вот и задаю вопрос, как это сделать? То что картинка меняется при нажатии другой я это знаю. Если вам будет не трудно, подскажите как это сделать? Ну описать стили в состоянии наведения на их общий блок, чтобы при наведении на li.button, появилась картинка img11, а картинка img1 скрылась.

[Сергей delphinpro]

Emil7676, Да вы что.. селекторы - это первое что изучается в css...

К тому же я уже сказал. hover должен быть на родительском блоке

li.button:hover img.img11 {
    opacity: 100%
}

[Emil7676]

Сергей delphinpro, Большое спасибо, вы мне очень помогли!