Отображение div при наведении указателя мыши на изображение

Question

Я пытаюсь увеличить изображение при наведении курсора на него, а также отображать div с текстом во время зависания над этим изображением. Расширяющиеся работы, но показывая другой div, нет.

<div id="punt1"> 
    <div id="puntnaam1" class="puntnaam">Ieplaan</div> 
    <img class="punt"src="ieplaan1.jpg"> 
</div> 

Для CSS я использовал:

.punt{ 
    height: 100px; 
    width: 100px; 
} 

.puntnaam{ 
    display: none; 
} 

.punt:hover{ 
    transform: scale(3); 
} 

.punt:hover .puntnaam{ 
    display: block; 
} 

Что я делаю неправильно?

Answer 1

Вы не можете выбрать предыдущих братьев или родительских элементов в DOM с помощью CSS. Вы можете выбирать только следующих братьев и сестер или дочерних элементов.

например, если вы изменили код для этого:

<div id="punt1"> 
    <img class="punt"src="ieplaan1.jpg"> 
    <div id="puntnaam1" class="puntnaam">Ieplaan</div> 
</div> 

Тогда ваш селектор может выглядеть следующим образом:

.punt:hover + .puntnaam{ 
    display: block; 
} 

Поскольку теперь <div> является следующим родственным после <img>

См .: Is there a "previous sibling" CSS selector?

Answer 2

Вы не можете сделать что-то подобное

.punt:hover .puntnaam{ 
    display: block; 
} 

ее не работает, что путь в CSS причина puntnaam уже скрыты, Вы можете использовать простой код JQuery, чтобы решить ее

$(".punt").hover(function() { 
$("#puntnaam1").show(); 
});