Форум

dexer · #1 (**permalink**) 14.07.2017, 00:50

Здравствуйте! Использую следующий код:

<ul class="social">
    <li>
      <a href="" class="social-icon" > <i class="fa fa-vk" data-showit="vk"></i></a>
    </li>
    <li>
      <a href="" class="social-icon"> <i class="fa fa-instagram" data-showit="instagramm"></i></a>
    </li>
    <li>
      <a href="" class="social-icon"> <i class="fa fa-twitter" data-showit="twitter"></i></a>
    </li>
    <li>
      <a href="" class="social-icon"> <i class="fa fa-quora" data-showit="quora"></i></a>
    </li>
  </ul>

Каким способом я могу прикрутить к каждому классу иконки звук (для теста возьмем этот) используя событие onmouseover? При этом менять звук на следующий после наводки на другой элемент списка.

j0hnik · #2 (**permalink**) 14.07.2017, 02:33

<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	<ul class="social">
		<li>
			<a href="" class="social-icon"><i class="fa fa-vk" data-showit="vk"></i></a>
		</li>
		<li>
			<a href="" class="social-icon"> <i class="fa fa-instagram" data-showit="instagramm"></i></a>
		</li>
		<li>
			<a href="" class="social-icon"> <i class="fa fa-twitter" data-showit="twitter"></i></a>
		</li>
		<li>
			<a href="" class="social-icon"> <i class="fa fa-quora" data-showit="quora"></i></a>
		</li>
	</ul>
	<video controls="" name="media" class="fa fa-vk" style="display:none"><source src="https://www.myinstants.com//media/sounds/epic.swf_1.mp3" type="audio/mpeg"></video>
	<video controls="" name="media" class="fa fa-instagram" style="display:none"><source src="https://www.myinstants.com/media/sounds/-captain_blood_der_schreckliche_blackwake.mp3" type="audio/mpeg"></video>
	<video controls="" name="media" class="fa fa-twitter" style="display:none"><source src="https://www.myinstants.com/media/sounds/-1.mp3" type="audio/mpeg"></video>
	<video controls="" name="media" class="fa fa-quora" style="display:none"><source src="https://www.myinstants.com/media/sounds/-_18.mp3" type="audio/mpeg"></video>
	<script>

		[].forEach.call(document.querySelectorAll('.fa'), function(el){
			el.addEventListener("mouseover", function(e){
				[].forEach.call(document.querySelectorAll('video'), function(el){
					el.pause();
				});
				document.getElementsByClassName(e.currentTarget.className)[1].play();
			});
		});

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

dexer · #3 (**permalink**) 14.07.2017, 07:43

j0hnik, большое спасибо, все прекрасно работает!

Форум

Справочник

Discord чат

Курсы javascript