Как при наведении на блок изменялись стили в JS

@Vselenaya · Регистрация: 08.10.2018

Студворк — интернет-сервис помощи студентам

Всем доброго дня) Как вот этот скрипт, добавить на каждый блок div

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
    
function changeItem() {
    document.getElementById('line').style.width = '170px';
    document.getElementById('circle').style.background = 'red';
    document.getElementById('mouse').style.backgroundPosition = '0 -32px';
}
    function rechangeItem() {
 
    document.getElementById('line').style.width = '0';
    document.getElementById('circle').style.background = '';
    document.getElementById('mouse').style.backgroundPosition = '';
}

Чтобы при наведении на определенный блок, работал этот скрипт.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div id="text_box" onmouseover="changeItem()" onmouseout="rechangeItem()">
                        <div id="mouse"></div>
                        <h2>Бесплатная доставка</h2>
                        <p>Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней</p>
                    </div>
                    <div class="sub-line">
                        <div id="circle"></div>
                        <div id="line"></div>
                    </div>
                    <div id="text_box2" onmouseover="changeItem()" onmouseout="rechangeItem()">
                        <div id="mouse2"></div>
                        <h2>Бесплатная доставка</h2>
                        <p>Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней</p>
                    </div>
                    <div class="sub-line">
                        <div id="circle2"></div>
                        <div id="line2"></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <img src="img/2605/file.png">
                </div>
                <div class="col-md-4">
                <div class="text_box3">
                        <div id="mouse3"></div>
                        <h2>Бесплатная доставка</h2>
                        <p>Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней</p>
                    </div>
                    <div class="text_box4">
                        <div id="mouse4"></div>
                        <h2>Бесплатная доставка</h2>
                        <p>Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней</p>
                    </div>
                </div>
                
            </div>
        </div>

@atanov · 10.10.2018, 07:23

Vselenaya, а зачем здесь использовать js? Обычный css например для первого дива:

CSS
1
2
3
4
5
#text_box:hover
{
width: 170px;
...остальные стили...
}

@j2FunOnly · 10.10.2018, 09:14

atanov, мне кажется смысл в том, что при наведении мышью на один элемент, изменить стили другого, который селекторами css (относительно наведенного) не выбрать.

@atanov · 10.10.2018, 10:10

j2FunOnly, а, точно, эти алименты не дочерние даже. Ну тогда надо js ковырять

@Vselenaya · 10.10.2018, 11:35 **[ТС]**

Да j2FunOnly правильно понял. Мне нужно этот скрипт привязать к определенному id

@atanov · 10.10.2018, 12:42

Vselenaya, у Вас такая мешанина в разметке...

Вот Вам пример, как можно реализовывать что-то подобное:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class = "divFreeDelivery">
    Бесплатная доставка
</div>
<div class = "divChild">
    Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней
</div>
<div class = "divFreeDelivery">
    Бесплатная доставка
</div>
<div class = "divChild">
    Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней
</div>
<div class = "divFreeDelivery">
    Бесплатная доставка
</div>
<div class = "divChild">
    Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней
</div>
<div class = "divFreeDelivery">
    Бесплатная доставка
</div>
<div class = "divChild">
    Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней
</div>
<script src = "113.js"></script>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
for (let i = 0; i < document.getElementsByClassName('divFreeDelivery').length; i++)
{
    document.getElementsByClassName('divFreeDelivery')[i].addEventListener('mouseenter', changeItem);
    document.getElementsByClassName('divFreeDelivery')[i].addEventListener('mouseleave', rechangeItem); 
}
function changeItem (e)
{
    e.target.nextElementSibling.style.backgroundColor = 'red';
}
function rechangeItem (e)
{
    e.target.nextElementSibling.style.backgroundColor = '';
}

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	10.10.2018, 09:14
	atanov, мне кажется смысл в том, что при наведении мышью на один элемент, изменить стили другого, который селекторами css (относительно наведенного) не выбрать. 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	10.10.2018, 10:10
	j2FunOnly, а, точно, эти алименты не дочерние даже. Ну тогда надо js ковырять 0

@Vselenaya 0 / 0 / 0 Регистрация: 08.10.2018 Сообщений: 2
	10.10.2018, 11:35 [ТС]
	Да j2FunOnly правильно понял. Мне нужно этот скрипт привязать к определенному id 0