Есть блок, и их будет десятки, и делать для каждого блока функции кончено это перебор. Как сделать что бы не меняя класс одной функцией что бы работали десятки блоков.
blok
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
h3{
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 1.8rem;
line-height: 0%;
color: #FCD7BB;
}
.main{
max-width: 720px;
margin: 60px auto 0px;
}
.blok{
position: relative;
max-width: 640px;
display: grid;
grid-template-columns: 240px minmax(120px, 400px);
grid-template-rows: 60px 120px;
grid-template-areas:
"kartinka_blok zagolovok_blok"
"kartinka_blok opisanie_blok";
grid-gap: 0px 20px;
cursor: pointer;
}
.kartinka_blok{
grid-area: kartinka_blok;
}
.zagolovok_blok{
grid-area: zagolovok_blok;
}
.opisanie_blok{
grid-area: opisanie_blok;
}
.dalee_blok{
grid-area: dalee_blok;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .6);
opacity: 0;
transition: all .4s;
}
.dalee_tekst{
display: block;
text-align: center;
color: #AC5959;
text-decoration: underline;
padding: 90px 0px 0px 0px;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="blok">
<div class="kartinka_blok"><img src="https://rakipov.ru/files/1.jpg" width="100%" alt=""></div>
<div class="zagolovok_blok"><h3>Полигональный арт</h3></div>
<div class="opisanie_blok">Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций, которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает себя во всей красе.</div>
<div class="dalee_blok"><span class="dalee_tekst">Читать далее</span></div>
</div>
<script>
"use_strict"
const blok = document.querySelector(".blok");
const daleeBlok = document.querySelector(".dalee_blok");
function navedenie_1(){
daleeBlok.style.opacity = "1";
}
blok.addEventListener("mouseover", navedenie_1);
function navedenie_2(){
daleeBlok.style.opacity = "0";
}
blok.addEventListener("mouseout", navedenie_2);
</script>
</body>
</html>