Как сделать всплывающую подсказку на сss?

Question

[Игорь]

Здравствуйте
Пытаюсь сделать всплывающую подсказку, которая всплывает при наведении на картинку, внутри подсказки есть изображение и ссылка
Подскажите, плс, как сделать, чтобы подсказка не закрывалась, пока курсор наведен не только на изображение, но и на саму подсказку?
В общем, чтобы была возможность нажать ссылку

Код того, что есть на данный момент

<style type="text/css">
.tooltip-src + span{
	border-style:solid;
	color:#CB282C;
	border-radius: 5px;
	border-color:#CB282C;
    opacity:100%;
transition:1s;
	visibility:hidden;
    position:absolute;
    transform:translate(-50px,70%);
    pointer-events:none;   
  background-color:rgba(255,255,255,0.95);
    color:black; 
   padding:20px;
}
.tooltip-src:hover + span{
opacity:1;
visibility:visible; 
}
</style>
	

<span class="tooltip-src"><img src="\a1.png"  height="70px"></span>

<span>
<img src="\b1.png"  height="70px">
<a href="http://ya.ru">ссылка</a>
текст
</span>

Answer 1

[display: block]

Надо сделать скрытый span частью tooltip-src. Тогда, при наведении на скрытый блок, tooltip-src не перестает быть hover.

Answer 2

[Андрей Федоров]

Вот так:

.tooltip-src:hover + span,
.tooltip-src + span:hover {
opacity:1;
visibility:visible; 
}