Форум

Сергей Ракипов · #1 (**permalink**) 15.06.2020, 11:47

Есть блок, и их будет десятки, и делать для каждого блока функции кончено это перебор. Как сделать что бы не меняя класс одной функцией что бы работали десятки блоков.

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>

laimas · #2 (**permalink**) 15.06.2020, 11:49

CSS не хватает?
:hover opacity: 1, а по умолчанию 0.

Сергей Ракипов · #3 (**permalink**) 15.06.2020, 12:15

laimas,
А как это сделать?

laimas · #4 (**permalink**) 15.06.2020, 12:19

.blok {
    opacity: 0
}

.blok:hover {
    opacity: 1
}

http://htmlbook.ru/css

Сергей Ракипов · #5 (**permalink**) 15.06.2020, 12:59

Сообщение от laimas

.blok {
    opacity: 0
}

.blok:hover {
    opacity: 1
}

http://htmlbook.ru/css

Такой вариант не подходит, посмотрите на верстку и как работает, и поймете что так не сработает.

SuperZen · #6 (**permalink**) 15.06.2020, 13:15

<!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>

  <div class="blok">
    <div class="kartinka_blok"><img src="https://rakipov.ru/files/1.jpg" width="100%" alt=""></div>
    <div class="zagolovok_blok">
      <h3>Полигональный ар2т</h3>
    </div>
    <div class="opisanie_blok">Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций,
      которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает
      себя во всей красе.</div>
    <div class="dalee_blok"><span class="dalee_tekst">Читать далее</span></div>
  </div>
  <script>
    "use_strict"
    document.querySelectorAll(".blok").forEach(b => {
      b.addEventListener("mouseenter", function () {
        b.querySelector('.dalee_blok').style.opacity = 1
      })
      b.addEventListener("mouseleave", function () {
        b.querySelector('.dalee_blok').style.opacity = 0
      })
    });
  </script>
</body>

</html>

или без js

<!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;
    }
    
    .dalee_blok {
      opacity: 0;
    }

    .blok:hover .dalee_blok {
      opacity: 1;
    }
  </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>

  <div class="blok">
    <div class="kartinka_blok"><img src="https://rakipov.ru/files/1.jpg" width="100%" alt=""></div>
    <div class="zagolovok_blok">
      <h3>Полигональный ар2т</h3>
    </div>
    <div class="opisanie_blok">Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций,
      которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает
      себя во всей красе.</div>
    <div class="dalee_blok"><span class="dalee_tekst">Читать далее</span></div>
  </div>
  <script>
    "use_strict"
    // document.querySelectorAll(".blok").forEach(b => {
    //   b.addEventListener("mouseenter", function () {
    //     b.querySelector('.dalee_blok').style.opacity = 1
    //   })
    //   b.addEventListener("mouseleave", function () {
    //     b.querySelector('.dalee_blok').style.opacity = 0
    //   })
    // });
  </script>
</body>

</html>

laimas · #7 (**permalink**) 15.06.2020, 13:18

Сообщение от Сергей Ракипов

Такой вариант не подходит

А кто мешает указать по селектору нужное

.dalee_blok {
    opacity: 0
}
 
.blok:hover .dalee_blok {
    opacity: 1
}

Ну я же дал ссылку, почитайте о селекторах, что там сложного.

Сергей Ракипов · #8 (**permalink**) 18.06.2020, 16:21

laimas,
SuperZen,

Спасибо за помощь, очень признателен

Сергей Ракипов · #9 (**permalink**) 19.06.2020, 07:07

SuperZen,
А можете объяснить как читается этот код

document.querySelectorAll(".blok").forEach(b => {
      b.addEventListener("mouseenter", function () {
        b.querySelector('.dalee_blok').style.opacity = 1
      })
      b.addEventListener("mouseleave", function () {
        b.querySelector('.dalee_blok').style.opacity = 0
      })
    });

laimas · #10 (**permalink**) 19.06.2020, 09:19

document.querySelectorAll(".blok") //получить элементы класса blok
    .forEach(b => { //обойти их циклом, здесь b текущий в итерации элемент
        b.addEventListener("mouseenter", function () { //установить для него обработчик события mouseenter
            //в обработчике найти в этом элементе его дочерний элемент с классом dalee_blok
            //и установить значение правила стиля
            b.querySelector('.dalee_blok').style.opacity = 1 
        })

Соответственно b.addEventListener("mouseleave"... для ухода мыши с элемента.

Форум

Справочник

Discord чат

Курсы javascript