Как сделать чтобы при нажатии на объект, происходило действие?

Question

[Emil7676]

Указываю к img11 чтобы при наведении менялась картинка, но когда я прописываю чтобы и при нажатии на неё она менялась, ничего не происходит, подскажите пожалуйста что я делаю не так.

<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>

.img1 {
    position: relative;
    float: left;
    padding-right: 10px;
    bottom: 5px;
}
.img11 {
    right: 175px;
    position: relative;
    float: right;
    bottom: 5px;

li.button img.img11 {
    opacity: 0%;
    transition: 0.2s;
}
li.button:hover img.img11 {
    opacity: 100%;
}

li.button:focus img.img11 {
    opacity: 100%;
}

Comments

[キム ファイブプラス]

Через JS

[gogowq]

hover не является кликом. Для этих целей,как и написали выше,используют JS

Answer 1

[Антон Горецкий]

Почитай вот это Какие элементы HTML могут получить фокус Твой элемент li не может получить фокус.
Можно сделать такое если добавить чекбокс (невидимый) и стилизовать соседний элемент в зависимости от его состояния.
Иначе, придется javascript подключать.