Форум

Сергей Ракипов · #1 (**permalink**) 05.01.2021, 12:17

Есть вот такой код

На этот элемент наводят мышь или отводят с него izmenenie_nastroek_blok_1
А на этом элементе происходят изменения zagolovok_tsvet_1

let izmenenie_nastroek_blok_1 = document.querySelector(".izmenenie_nastroek_blok_1");
let zagolovok_tsvet_1 = document.querySelector(".zagolovok_tsvet_1");

let zagolovok_tsvet_izmenenie_1 = () => {
    zagolovok_tsvet_1.style.color = "#0504aa";
    console.log("навелось");
}
izmenenie_nastroek_blok_1.addEventListener("mouseover", zagolovok_tsvet_izmenenie_1);

let zagolovok_tsvet_izmenenie_11 = () => {
    zagolovok_tsvet_1.style.color = "#000";
    console.log("увелось");
}
izmenenie_nastroek_blok_1.addEventListener("mouseout", zagolovok_tsvet_izmenenie_11);

Есть ощущение что есть можно сделать короче.

ksa · #2 (**permalink**) 09.01.2021, 13:31

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

Есть ощущение что есть можно сделать короче.

Сделай покороче имена переменным...

Напиши одну функцию с параметром...
Подвешивай ее на события с разными параметрами...

рони · #3 (**permalink**) 09.01.2021, 13:47

Сергей Ракипов,
может css :hover?

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

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

Сергей Ракипов,
может css :hover?

Так вот я что то пробую но не срабатывает.

<!doctype html>
<html lang="ru">

<head>
    <meta charset="utf-8">
    <title>index</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="index">
    <meta name="Keywords" content="index">
    <style>
        .blok {
            width: 400px;
            height: 100px;
            margin: 10px auto;
        }

        .kvadrat {
            width: 100px;
            height: 100px;
            border: 3px solid #000;
            cursor: pointer;
        }

        .kvadrat.aktiv {
            border: 3px solid #0504aa;
        }

        .kvadrat:focus {
            outline: none;
        }
        .kvadrat:hover .zagolovok{
            color:#0504aa
        }
    </style>
</head>

<body>
    <div class="blok">
        <h1 class="zagolovok">Заголовок</h1>
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>

</body>

</html>

Вроде все сделал правильно, но заголовок не меняет цвет при наведение на квадрат.

И у меня вот таких блоков будет штук 6

<div class="blok">
<h1>Заголовок</h1>
<button class="kvadrat"></button>
<button class="kvadrat"></button>
<button class="kvadrat"></button>
</div>

рони · #5 (**permalink**) 18.01.2021, 15:52

Сергей Ракипов,
с таким html сложно css применить, но делегирование снова рулит.

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="index">
    <meta name="Keywords" content="index">
    <style>
        .blok{
            width: 400px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        .kvadrat.aktiv{
            border: 3px solid #0504aa;
        }
       .kvadrat:focus{
           outline: none;
       }
       .blok h1.hover{
           color:#0504aa;
       }

    </style>
</head>

<body>
    <div class="blok">
        <h1 class="zagolovok">Заголовок</h1>
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
    <div class="blok">
        <h1 class="zagolovok">Заголовок</h1>
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
    <div class="blok">
        <h1 class="zagolovok">Заголовок</h1>
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
<script>
    let body = document.body;
    let aktiv = ({target}) => {
        target = target.closest(".kvadrat");
        if(!target) return;
        let parent  = target.closest(".blok");
        let current = parent.querySelector(".kvadrat.aktiv");
        current && current.classList.remove("aktiv");
        target.classList.add("aktiv");
    }
    body.addEventListener("click", aktiv);


    let noverEvent = {
    handleEvent: event => {
        target = event.target.closest(".kvadrat");
        if(!target) return;
        let parent  = target.closest(".blok");
        let h = parent.querySelector("h1");
        h.classList.toggle("hover", event.type == "mouseenter")
    }
   }
   body.addEventListener("mouseenter", noverEvent, true);
   body.addEventListener("mouseleave", noverEvent, true);

</script>         </body>
</html>

voraa · #6 (**permalink**) 18.01.2021, 16:49

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>
 
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="index">
    <meta name="Keywords" content="index">
    <style>
        .blok{
            width: 600px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
			flex-direction: row-reverse;
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        .kvadrat.aktiv{
            border: 3px solid #0504aa;
        }
       .kvadrat:focus{
           outline: none;
       }
       .blok .kvadrat:hover~h1{
           color:#0504aa;
       }
    </style>
</head>
 
<body>
    <div class="blok">
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat aktiv"></button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
    <div class="blok">
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat aktiv"></button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
    <div class="blok">
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat aktiv"></button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
<script>
    let body = document.body;
    let aktiv = ({target}) => {
        target = target.closest(".kvadrat");
        if(!target) return;
        let parent  = target.closest(".blok");
        let current = parent.querySelector(".kvadrat.aktiv");
        current && current.classList.remove("aktiv");
        target.classList.add("aktiv");
    }
    body.addEventListener("click", aktiv);
 
 
//    let noverEvent = {
//    handleEvent: event => {
 //       target = event.target.closest(".kvadrat");
//        if(!target) return;
//        let parent  = target.closest(".blok");
//        let h = parent.querySelector("h1");
//        h.classList.toggle("hover", event.type == "mouseenter")
//    }
//   }
//   body.addEventListener("mouseenter", noverEvent, true);
//   body.addEventListener("mouseleave", noverEvent, true);
 
</script>
</body>
</html>

Сергей Ракипов · #7 (**permalink**) 19.01.2021, 05:53

рони,
voraa,

Спасибо, два лучших пользователя на сайте.

Сергей Ракипов · #8 (**permalink**) 19.01.2021, 08:12

voraa,
А по другому ни как не записать, если к примеру h1 впереди, то есть он без ~

рони · #9 (**permalink**) 19.01.2021, 08:18

voraa,
а без flex-direction: row-reverse; сможешь?

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="index">
    <meta name="Keywords" content="index">
    <style>
        .blok{
            width: 600px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
            /*flex-direction: row-reverse;*/
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        .kvadrat.aktiv{
            border: 3px solid #0504aa;
        }
       .kvadrat:focus{
           outline: none;
       }
       .blok .kvadrat:hover~h1{
           color:#0504aa;
       }
    </style>
</head>

<body>
<div class="blok">
        <button class="kvadrat aktiv">1</button>
        <button class="kvadrat">2</button>
        <button class="kvadrat">3</button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv">1</button>
        <button class="kvadrat">2</button>
        <button class="kvadrat">3</button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv">1</button>
        <button class="kvadrat">2</button>
        <button class="kvadrat">3</button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
</body>
</html>

рони · #10 (**permalink**) 19.01.2021, 08:21

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

Нужна именно такая последовательность тэгов

потому что селекторы css обратно не видят, нужен квадрат а затем надпись, чтоб квадрат мог влиять на заголовок.

но заголовок можно визуально разместить впереди, один из таких способов показал voraa,

Форум

Справочник

Discord чат

Курсы javascript