CSS hover исчезает при наведении указателя мыши

Question

Я просто пытаюсь сделать карту, которая имеет разные места/точки на ней. Если вы нажмете стрелку/мышь на одну из точек, прозрачное изображение, расположенное на этой точке, должно измениться на изображение с именем на нем. Таким образом, это будет изменение изображения. НО - его полностью не так. Изображение с именем есть все время, и когда я нажимаю на него курсор, появляется прозрачный. Я попытался изменить фотографии, но это не сработало.

СМЧ:

.nutbrown img { 
position:absolute; 
margin:497px 642px 247px 380px; 
background:url("test1.png") no-repeat; 
height: 20px; 
text-decoration: none; 
} 

.nutbrown:hover img { 
position:absolute; 
height: 20px; 
visibility:hidden; 
text-decoration: none; 
} 

HTML-

<div class="nutbrown"> <img src="test.png" /></div> 

Что я делаю неправильно? Спасибо за помощь! :)

Answer 1

Из-за этого visibility:hidden;

Вы рассказываете в CSS, чтобы скрыть все изображение внутри .nutbrown при наведении .nutbrown