Как сделать html5 звук для псевдо класса :hover?

Question

Кирилл @masimore

HTML

Как сделать html5 звук для псевдо класса :hover?

Есть меню soundclan.myjino.ru/navsound.html так вот при на ведение курсора на ссылку воспроизводиться звук1 при клике воспроизводится звук2 при помощи html5 audio и скрипта js. Аудио файлы лежат в папке /audio/nav-sound-1 и nav-sound-2 но проблема заключается в том что не получается перейти по ссылке. Помогите разобраться с проблемой!

Вопрос задан более трёх лет назад
3826 просмотров

Комментировать

Подписаться 2 Оценить Комментировать

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Решения вопроса 1

15 комментариев

Кирилл @masimore Автор вопроса

да но я так понимаю звук будет воспроизводиться только при нажатии, а нужно чтоб звук воспроизводился и при наведении и при клике. Честно сказать в JS я не волоку совсем.

Написано более трёх лет назад
Валерий Кириченко @valera5505

Так ставьте и mouseenter, и click.

Написано более трёх лет назад
Кирилл @masimore Автор вопроса

Спасибо большое Вы мне очень помогли, задача решена

Написано более трёх лет назад
Кирилл @masimore Автор вопроса

Но вопрос еще такой а можно не клонировать два раза <script></script> а объединить это все воедино?

Написано более трёх лет назад
Иван Прилепский @Prilepsky

<code> <script>$("#nav-two a") .each(function(i) { if (i != 0) { $("#beep-two") .clone() .attr("id", "beep-two" + i) .appendTo($(this).parent()); } $(this).data("beeper", i); }) .mouseenter(function() { $("#beep-two" + $(this).data("beeper"))[0].play(); }); $("#beep-two").attr("id", "beep-two0"); //Событие по клику $('.beep').bind('click', function(){ $("#beep-two" + $(this).data("beeper"))[0].play(); }); </script></code>

Написано более трёх лет назад
Иван Прилепский @Prilepsky

Блин, не работает форматирование в комментариях. К ссылкам добавь класс beep и добавь обработчик события по клику. (Код в <code> </code> выше)

Написано более трёх лет назад
Иван Прилепский @Prilepsky

@IoannGrozny , правильно советует.

Написано более трёх лет назад
Кирилл @masimore Автор вопроса

Не могли бы вы вставить код на js fiddle или pastebinт так я вообще не могу разобраться без форматирования.

Написано более трёх лет назад
Иван Прилепский @Prilepsky

http://jsfiddle.net/cs3X2/

Написано более трёх лет назад
Кирилл @masimore Автор вопроса

Это что то не то у меня при наведении должен проигрываться звук nav-sound-1 а при клике nav-sound-2 как в этом примере http://soundclan.myjino.ru/html-nav-sound/index.html работать то оно работает и за это большое спасибо Вам. Просто я думал есть возможность объединить скрипты в один чтоб меньше было кода.

Написано более трёх лет назад
Иван Прилепский @Prilepsky

http://jsfiddle.net/cs3X2/6/ Можно еще вот так

Написано более трёх лет назад
Кирилл @masimore Автор вопроса

Классный вариант таким образом можно выбирать каким ссылкам присваивать клас со звуком а каким нет.

Написано более трёх лет назад
Иван Беленков @IoannGrozny

так и в моём варианте можно, всё зависит от задачи. Делегирование обработчиков принимает любые селекторы. Пожалуйста: http://jsbin.com/OHEtaSID/3/watch?html,js,output

Написано более трёх лет назад
Кирилл @masimore Автор вопроса

Так то оно так, но вот есть проблема если подставить реальную ссылку типа <a href="http://soundclan.myjino.ru/" class="beep" > в ваш вариант то ничего не происходит браузер не открывает её.

Написано более трёх лет назад
Кирилл @masimore Автор вопроса

Иван Беленков: Вернулся к вопросу аудионавигации! но вот не могу только разобраться почему ссылка не открывается soundclan.myjino.ru/navsound.html

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

7 комментариев

Кирилл @masimore Автор вопроса

Оговорюсь еще раз я в js совсем не бум-бум, не могли бы Вы привести пример кода.

Написано более трёх лет назад
Иван Беленков @IoannGrozny

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

Написано более трёх лет назад
Кирилл @masimore Автор вопроса

Логика проста при наведении воспроизводиться один звук при нажатии другой, проблема как бы решена. но хотелось бы это все объединить в один файл допустим и уже подключить его в <head></head> как обычный скрипт чтоб шаблон не засирать лишним кодом.

Написано более трёх лет назад
Кирилл @masimore Автор вопроса

Если вы посмотрите на исходный код страницы soundclan.myjino.ru/html-nav-sound/index.html то все поймете.

Написано более трёх лет назад
Иван Беленков @IoannGrozny

Тогда вот так: http://jsbin.com/OHEtaSID/1/edit И незачем усложнять.

Написано более трёх лет назад
Кирилл @masimore Автор вопроса

Класс!!! такой мне вариант больше нравится, это я и имел в виду. Спасибо огромное за помощь. надеюсь я вас не утомил )

Написано более трёх лет назад
Кирилл @masimore Автор вопроса

Иван Беленков: Вернулся к вопросу аудионавигации! но вот не могу только разобраться почему ссылка не открывается soundclan.myjino.ru/navsound.html

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+2 ещё

Простой
Как блок уведомлений поднять выше dialog?
- 1 подписчик
- 15 часов назад
- 62 просмотра
1

ответ
HTML

+1 ещё

Простой
Как свг заменить на фон?
- 1 подписчик
- 08 мая
- 231 просмотр
1

ответ
HTML

+1 ещё

Простой
Чем препроцессить в HTML сокращения?
- 2 подписчика
- 04 мая
- 309 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 343 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 738 просмотров
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 696 просмотров
4

ответа
HTML

+1 ещё

Простой
Беда с input. Как избавиться от выделения заполненного поля?
- 2 подписчика
- 31 мар.
- 355 просмотров
1

ответ
HTML

Простой
Как сделать так, чтобы в браузерах код html не показывался в квадратиках?
- 4 подписчика
- 26 мар.
- 685 просмотров
3

ответа
HTML

Простой
Как сделать деплой проекта, статического сайта сделанного на чистом html у которого нет баз данных?
- 1 подписчик
- 26 мар.
- 262 просмотра
3

ответа
HTML

+1 ещё

Простой
Как менять тему письма при рассылке на почту в зависимости от темы устройства?
- 2 подписчика
- 25 мар.
- 265 просмотров
1

ответ
Показать ещё Загружается…

Answer 1 · 2013-11-20 13:28:26

Иван Прилепский @Prilepsky

Программист 1C

В скрипте заменить mouseenter на click

Ответ написан более трёх лет назад

15 комментариев

Answer 2 · 2013-11-20 13:54:15

Иван Беленков @IoannGrozny

Front-end разработчик

Я бы в этом случае сделал так:

$('#nav-two a').on('mouseenter click', function() {
    /* Код функции */
});

Ответ написан более трёх лет назад

7 комментариев

Как сделать html5 звук для псевдо класса :hover?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт