Имитация hover после загрузки страницы

@orest95 · Регистрация: 08.12.2016

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

Здравствуйте!
Столкнулся со следующей задачей, нужно сделать чтобы на некоторое время сработал hover.
то есть, является верхней бар, в js таймаут сделал чтобы пункты меню появлялись с задержкой. а теперь е нужно сделать когда появился один пункт и не успел появиться другой чтобы он был как бы наведен курсор.
ибо эффект который показывается при наведении сделан через :before и :after.

буду очень благодарен!

@Fedor92 · 08.12.2016, 23:29

orest95, код в студию...

@orest95 · 08.12.2016, 23:38 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
    $(document).ready(function() {
        setTimeout ("$('#first_link').show('drop');", 2000);
        setTimeout ("$('#second_link').show('drop');", 6000);
        setTimeout ("$('#third_link').show('drop');", 9000);
        setTimeout ("$('#fourth_link').show('drop');", 12000);
        setTimeout ("$('#fifth_link').show('drop');", 15000);
        setTimeout ("$('#sixth_link').show('drop');", 18000);
    });

CSS
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
#top-nav li a{
    font: 500 18px/19px 'PT Sans';
    display:block;
    padding:0 0 18px;
    position:relative;
    background-color: #fff;
}
#top-nav li a:hover{
    color:#78A91D;
}
#top-nav li a:before,#top-nav li a:after{
    display:block;
    content:'';
    position:absolute;
    bottom:0;
    width:0;
    height:7px;
    background:#78A91D;
    -webkit-transition:all 0.2s ease-out 0s;
    -moz-transition:all 0.2s ease-out 0s;
    -o-transition:all 0.2s ease-out 0s;
    transition:all 0.2s ease-out 0s;
}
 
#top-nav li a:hover:before,#top-nav li a:hover:after,#top-nav li a.active:before,#top-nav li a.active:after{width:50%;}
#top-nav li a:before{right:50%;}
#top-nav li a:after{left:50%;}
 
 /* id кожного пункту меню */
#first_link {display: none}
#second_link {display: none}
#third_link {display: none}
#fourth_link {display: none}
#fifth_link {display: none}
#sixth_link {display: none}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-li-a" id="top-nav">
                    <li id="navbarblock"> <a class="go_to" href="#gofasad">
                        <div class="first_animate" id="first_link"> Фасадні системи</div>
                    </a></li>
                    <li id="navbarblock"> <a class="go_to" href="#godah">
                        <div id="second_link"> Дахові системи</div>
                    </a></li>
                    <li id="navbarblock"> <a class="go_to" href="#govodostok">
                        <div id="third_link"> Водостічні системи</div>
                    </a></li>
                    <li id="navbarblock"> <a class="go_to" href="#gofeed">
                        <div id="fourth_link"> Відгуки</div>
                    </a></li>
                    <li id="navbarblock"> <a class="go_to" href="#gocontact">
                        <div id="fifth_link"> Контакти</div>
                    </a></li>
                    <li id="navbarblock"> <a href="#modal">
                        <div id="sixth_link"> Замовити консультацію</div>
                    </a></li>
                </ul>
            </div>

@Уф · 09.12.2016, 09:40

откуда такая форма записи? надо

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function() {
        setTimeout (function(){$('#first_link').show('drop');}, 2000);
        setTimeout (function(){$('#second_link').show('drop');}, 6000);
        setTimeout (function(){$('#third_link').show('drop');}, 9000);
        setTimeout (function(){$('#fourth_link').show('drop');}, 12000);
        setTimeout (function(){$('#fifth_link').show('drop');}, 15000);
        setTimeout (function(){$('#sixth_link').show('drop');}, 18000);
    });

Добавлено через 2 минуты
посмотрел, ваш вариант тоже работает, извиняюсь, всегда писал через функцию

Добавлено через 2 часа 3 минуты
сделал через классы https://jsfiddle.net/68oLu5oy/ думаю дальше сами допилите

CSS
1
2
3
4
5
6
#top-nav li a:hover:before,
#top-nav li a.hover:before,
#top-nav li a:hover:after,
#top-nav li a.hover:after,
#top-nav li a.active:before,
#top-nav li a.active:after{width:50%;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
setTimeout ("$('#first_link').show('drop').parent().addClass('hover');", 500);
setTimeout ("$('#second_link').show('drop').parent().addClass('hover');;", 1000);
setTimeout ("$('#third_link').show('drop').parent().addClass('hover');;", 1500);
setTimeout ("$('#fourth_link').show('drop').parent().addClass('hover');;", 2000);
setTimeout ("$('#fifth_link').show('drop').parent().addClass('hover');;", 2500);
setTimeout ("$('#sixth_link').show('drop').parent().addClass('hover');;", 3000);
 
setTimeout ("$('#first_link').parent().removeClass('hover');", 750);
setTimeout ("$('#second_link').parent().removeClass('hover');;", 1250);
setTimeout ("$('#third_link').parent().removeClass('hover');;", 1750);
setTimeout ("$('#fourth_link').parent().removeClass('hover');;", 2250);
setTimeout ("$('#fifth_link').parent().removeClass('hover');;", 2750);
setTimeout ("$('#sixth_link').parent().removeClass('hover');;", 3250);
});

@orest95 · 11.12.2016, 14:52 **[ТС]**

Уф, Спасибо большое! очень помогли

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@orest95 0 / 0 / 0 Регистрация: 08.12.2016 Сообщений: 3

	Имитация hover после загрузки страницы 08.12.2016, 22:00. Показов 2767. Ответов 4 Метки нет (Все метки) Здравствуйте! Столкнулся со следующей задачей, нужно сделать чтобы на некоторое время сработал hover. то есть, является верхней бар, в js таймаут сделал чтобы пункты меню появлялись с задержкой. а теперь е нужно сделать когда появился один пункт и не успел появиться другой чтобы он был как бы наведен курсор. ибо эффект который показывается при наведении сделан через :before и :after. буду очень благодарен! Миниатюры 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	08.12.2016, 23:29
	orest95, код в студию... 0

@orest95 0 / 0 / 0 Регистрация: 08.12.2016 Сообщений: 3
	11.12.2016, 14:52 [ТС]
	Уф, Спасибо большое! очень помогли 0

Имитация hover после загрузки страницы

Решение