@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.
  • Вопрос задан
  • 74 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
но картинка меняется только при наведении на другую картинку


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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы