Javascript-форум - Показ/скрытие "div"

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Показ/скрытие "div" (https://javascript.ru/forum/dom-window/51971-pokaz-skrytie-div.html)

Показ/скрытие "div"

Спецы "CSS", послали меня к спецам "JavaScript" :p

Вопрос таков :
Как показать/скрыть "div" блок, при наведении/отводе курсора мыши, на другой "div", который находится под третьим "div" ?

Идея была проста :

Наводишь курсор мыши на изображение.
Оно затемняется, и на нём появляются определённые ссылки.

Я думал что обычным CSS управлюсь.
Но поверх второго "div'a" с "background: rgba", есть "div" с декоративным изображением (глянцем).
Который не позволяет использовать псевдокласс ":hover".

:help:

Ps: Если не сложно, ответе кодом, с комментариями.
А то я с "JavaScript" ещё не знаком.

Давай разметку и стили свои. Накидай пример. Чтоб было так:

Я - пример

Сделано через [ html run ] [/ html ]

Имхо очень наглядно

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<style>


.A1 {height: 256px;width: 256px;position: absolute}

.A2 {background: rgba(255,255,51,3); top: 50px; left: 50px;}

.A3 {background: rgba(255,51,204,3); top: 80px; left: 100px;}
.A31:hover {background: rgba(155,51,204,3); top: 90px; left: 110px;}

.A4 {background: rgba(153,255,255,3); top: 150px; left: 150px;}


</style>
<body>


<div class="A1 A2">Изображение</div>
<div class="A1 A3 A31">Появляющееся затемнение + ссылки, которые должны появляться, только когда наведёшь курсор мыши.</div>
<div class="A1 A4">Глянец - Который мешает предыдущиму слою</div>


</body>
</html>

А так сделать - религия не позволяет?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<style>
 
 
.A1 {height: 256px;width: 256px;position: absolute}

.A0 {position: relative}
 
.A2 {background: rgba(255,255,51,3); top: 50px; left: 50px;}
 
.A3 {background: rgba(255,51,204,3); top: 80px; left: 100px;}
.A1:hover .A31 {background: rgba(155,51,204,3); top: 90px; left: 110px;}
 
.A4 {background: rgba(153,255,255,3); top: 150px; left: 150px;}
 
 
</style>
<body>
 
 
<div class="A1 A0">
<div class="A1 A2">Изображение</div>
<div class="A1 A3 A31">Появляющееся затемнение + ссылки, которые должны появляться, только когда наведёшь курсор мыши.</div>
<div class="A1 A4">Глянец - Который мешает предыдущиму слою</div>
 
 </div>
</body>
</html>