Много блоков
Есть блок, и их будет десятки, и делать для каждого блока функции кончено это перебор. Как сделать что бы не меняя класс одной функцией что бы работали десятки блоков.
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>
|
CSS не хватает?
:hover opacity: 1, а по умолчанию 0. |
laimas,
А как это сделать? |
|
Цитата:
|
<!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>
|
Цитата:
.dalee_blok {
opacity: 0
}
.blok:hover .dalee_blok {
opacity: 1
}
Ну я же дал ссылку, почитайте о селекторах, что там сложного. |
laimas,
SuperZen, Спасибо за помощь, очень признателен |
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
})
});
|
document.querySelectorAll(".blok") //получить элементы класса blok
.forEach(b => { //обойти их циклом, здесь b текущий в итерации элемент
b.addEventListener("mouseenter", function () { //установить для него обработчик события mouseenter
//в обработчике найти в этом элементе его дочерний элемент с классом dalee_blok
//и установить значение правила стиля
b.querySelector('.dalee_blok').style.opacity = 1
})
Соответственно b.addEventListener("mouseleave"... для ухода мыши с элемента. |
Сергей Ракипов, Hello World )
найти все элементы с классом .block (querySelectorAll(".blok")), например в коде в посте №6 их будет два(<div class="blok">), для каждого элемента (forEach( b =>... , здесь используется arrow function, можно записать как function(b) {...) повесим по два слушателя (b.addEventListener...), которые слушают mouseenter (что курсор зашел в область элемента), и mouseleave (что курсор вышел за пределы элемента), если курсор зашел в область элемента (function(mouseenter)...), найдем конкретно в этом элементе (b), элемент с классом .dalee_block (b.querySelector('.dalee_blok')) и выставим ему стиль прозрачность (('.dalee_blok').style.opacity) = 1, если курсор вышел за пределы области элемента, выставим ему стиль прозрачность 0 |
laimas,
Спасибо, очень доходчиво |
SuperZen,
Спасибо что отозволись |
Не люблю быть глупым, а b это что и откуда взялось
|
Цитата:
|
laimas,
b это аргумент?: |
Если бы код начинался так:
document.querySelectorAll(".blok") //получить элементы класса blok
.forEach(function(b) {
для вас было бы понятней, что такое b и откуда? А вам дали код написанный с применением стрелочных функций, только в этом и разница. |
laimas,
да так понятнее, в скобках пишут аргументы иногда это называют почему то параметрами И потом можно взять этот парметр. |
Можете "соединить" два значения в одно, страшного не будет. А вообще, параметр, это формальный параметр, передаваемое снаружи в функцию входное значение. А аргумент, фактическая переменная, значение которой используется как входное при вызове функции. Причем эту трактовку не обязательно вы встретите во всех языках.
https://developer.mozilla.org/ru/doc...uide/Functions |
let navedenie = document.querySelectorAll(".navedenie");
let kartinkaPriNavedenii = document.querySelectorAll(".kartinka_pri_navedenii");
navedenie.forEach(function(){
});
Как написать в действий функции, что при наведении, на блок navedenie показывался блок kartinkaPriNavedenii visibility: visible; |
Цитата:
PS. Если это решаемо средствами CSS, то используйте его, не нужно грузить JS этим. |
Цитата:
<div class="shriht"> <a href="12_pt_serif_open_sans/" target="_blank" class="navedenie">PT Serif & Open Sans</a> <div class="kartinka_pri_navedenii"> <img src="kartinka/12.png" alt=""> </div> </div> <div class="shriht"> <a href="13_pt_sans_pt_serif/" target="_blank" class="navedenie">PT sans & PT serif</a> <div class="kartinka_pri_navedenii"> <img src="kartinka/13.png" alt=""> </div> </div> |
let navedenie = document.querySelectorAll(".navedenie"); - это коллекция элементов, let kartinkaPriNavedenii = document.querySelectorAll(".kartinka_pri_navedenii "); - это тоже коллекция элементов. При этом, как выясняется, каждый элемент коллекции kartinkaPriNavedenii является дочерним элементом соответствующего элемента коллекции navedenie. Как понять чего вам хочется, если это две коллекции? Если управлять только своим дочерним элементом, то зачем вы получаете коллекцию kartinkaPriNavedenii?
Кстати, kartinkaPriNavedenii - это может и говорит вам о чем-то, но все-таки, такие ребусы читать не из приятного. И зачем так, ради "потренироваться" или же так и будет работать. Если последнее, то решать это посредством JS крайне плохая практика. |
laimas,
Я пока учусь в свободное время, честно не очень получается. |
Я сделал себе вот такую подсказку
https://rakipov.ru/shrift/ И мне нужно что бы это работало вот так, но для всех блоков, а не для одного.
const navedenie = document.querySelectorAll(".navedenie");
const kartinkaPriNavedenii = document.querySelector(".kartinka_pri_navedenii");
function priNavedenii_1() {
let navedenie = document.querySelectorAll(".navedenie");
let test = navedenie.getBoundingClientRect();
console.log(test.top);
function priNavedenii_2() {
if (test.top >= 387) {
kartinkaPriNavedenii.style.visibility = "visible";
kartinkaPriNavedenii.style.top = "-387" + "px";
} else if (test.top >= 0) {
kartinkaPriNavedenii.style.visibility = "visible";
kartinkaPriNavedenii.style.top = "0" + "px";
}
}
navedenie.addEventListener("mouseover", priNavedenii_2);
}
window.addEventListener('mousemove', priNavedenii_1);
function priNavedenii_3(){
kartinkaPriNavedenii.style.visibility = "hidden";
}
navedenie.addEventListener("mouseout", priNavedenii_3);
|
Цитата:
|
Цитата:
<script>
document.addEventListener( "DOMContentLoaded" , function() {
let div = document.querySelector('.kolonki');
let changeTop = {
handleEvent(event) {
const target = event.target.closest('.shriht');
if (!target) return;
let rect = target.getBoundingClientRect();
let divPicture = target.querySelector('.kartinka_pri_navedenii');
let Height = divPicture.offsetHeight;
let h = rect.top + Height > innerHeight ? innerHeight - (rect.top + Height + 10) : 0;
divPicture.style.setProperty('top', `${h}px`)
}};
div.addEventListener('mouseenter', changeTop, true);
});
</script>
|
Цитата:
int function_name(int a, int b) в Си - передаваемые в функцию параметры, это integer и функция возвращает integer. В РНР тип возвращаемый функцией описывается в конце после двоеточия, например function_name(array $a) : number. Если передаваемый параметр не будет соответствовать типу, то это вызовет ошибку. Вызывая функцию вы передаете ей параметры - function_name(23, 99). Функция принимает эти параметры, которые являются ее аргументами:
function_name(a, b) {
a и b - аргументы функции
}
PS. Строго говоря, аргументы функции нельзя назвать переменными, значение их зависит от переданных в функцию параметров, это да. |
рони,
Как всегда спасибо, очень приятно знать что есть такие люди как вы |
laimas,
Буду еще разбираться, и я кроме верстки не чего не знаю JS это для меня первый язык |
Простите. но я не понимаю
Как мне получить содержимое блок2 при наведении блок1 в такой структуре, и что бы это содержимое не отображалось при отводе от блока
<div class="blok1">блок обертка
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
</div>
Если можно но не много объяснить, я пробую повторять под свои нужды но не выходит, а документация сложно дается. Я пробовал по разному но не могу понять как сделать коректно. |
Сергей Ракипов,
:-?
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.blok1 .blok2{
display: none;
}
.blok1:hover .blok2{
display: block;
}
</style>
</head>
<body>
<div class="blok1">блок обертка
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
</div>
</body>
</html>
|
Цитата:
<div class="blok2-1">блок1</div> вот это блок, и их может быть множество и для каждого свой <div class="blok2-2">блок2</div> |
Сергей Ракипов,
.blok2-1 + .blok2-2{
display: none;
}
.blok2-1:hover + .blok2-2{
display: block;
background-color: hsla(60, 100%, 90%, 1);
}
|
Цитата:
И мне интересно как это можно сделать. Сделаю сохраняю скрипт, может в будущем понадобится |
Цитата:
https://javascript.ru/forum/events/8...tml#post525963 пример https://javascript.ru/forum/misc/805...tml#post526148 всё тоже самое и тут |
Цитата:
И вот как там сделать у меня получается. Но разница в том что Ребенок на котрого там наводится он и подвержен изменениям, а у меня на одного ребёнка нужно навестить а к другому применить изменения. Там по разному верстка. Все что было в этом топике я прочитал |
Сергей Ракипов,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.blok2-1 + .blok2-2{
display: none;
color: red;
}
</style>
</head>
<body>
<div class="blok1">блок обертка
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
</div>
<script>
let change = {
handleEvent(event) {
const target = event.target.closest('.blok2-1');
if (!target) return;
target.nextElementSibling.style.display = event.type == 'mouseenter' ? 'block' : 'none';
}};
document.addEventListener('mouseenter', change, true);
document.addEventListener('mouseleave', change, true);
</script>
</body>
</html>
|
Сергей Ракипов,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.blok2-1 + .blok2-2{
display: none;
color: red;
}
.blok2-1.active + .blok2-2{
display: block;
}
</style>
</head>
<body>
<div class="blok1">блок обертка
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
<div class="blok2">блок
<div class="blok2-1">блок1</div>
<div class="blok2-2">блок2</div>
</div>
</div>
<script>
let change = {
handleEvent(event) {
const target = event.target.closest('.blok2-1');
if (!target) return;
target.classList.toggle('active', event.type == 'mouseenter');
}};
document.addEventListener('mouseenter', change, true);
document.addEventListener('mouseleave', change, true);
</script>
</body>
</html>
|
рони,
Сел разбираться |
| Часовой пояс GMT +3, время: 07:32. |