Magical text hover sound

Hello ,

I have one question about my text hover CSS code:
On my forum use i this CSS code:

Code:


a:hover {
position: relative; 
top: 1000.0%; left: 0.0%; }
a:hover {
background-image:url(http://i39.servimg.com/u/f39/12/23/10/57/sparkl10.gif); }


This make a glitter text hover. My question now, how can i add a magical sound to this CSS when you hover a link with your mouse on my forum, i have a Harry Potter forum.
Sorry for my english.

My forum: http://www.hpmagicworld.nl/forum (own domainname)

Many thanks.

Regards, Joost

HTML:

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<audio id="sound" controls preload="auto">
   <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls></source>
   Your browser isn't invited for super fun audio time.
</audio>
<a href="#" target="_blank">HELLO</a>

JAVASCRIPT:

Code:

var sound = $("#sound")[0];
$("a")
   .mouseenter(function() {
      sound.play();
   });

$("a")
   .mouseleave(function() {
      sound.pause();
    sound.currentTime = 0;
   
   });

CSS:

Code:

audio{
  display: none;
}

@masesm, i have add the HTML page, CSS and Javascript (copy and paste your codes) I do not see and hear anything when i move my mouse over the hyperlinks.

Edit, this sound will i add to the hover links.

The problem is the youtube link is not a sound, it is an webpage. You have to find a way to download the sound file from there(google for youtube downloader).

Or upload to an 3rd music hosting i.e Vocaroo and then get a direct mp3 link.

I have upload the sound. How can i install this?
I do not see and hear anything when i move my mouse over the hyperlinks.

*Bump topic* many thanks for your help and time.

You're doing something wrong mate the code works just fine. Check it out here: https://jsfiddle.net/8zpa1z4m/.
Send me what you're replacing for sound link.

masesm wrote:You're doing something wrong mate the code works just fine. Check it out here: https://jsfiddle.net/8zpa1z4m/.
Send me what you're replacing for sound link.

Hello ,

I want this sound, please.

Direct MP3 link here

Thanks @SarkZKalie !
How can i add this to my forum links ?

Search and replace "sound.mp3" by direct link provided above

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<audio id="sound" controls preload="auto">
  <source src="sound.mp3" controls></source>
  Your browser isn't invited for super fun audio time.
</audio>
<a href="#" target="_blank">HELLO</a>

I have add this to my HTML page, i hear nothing. xD

Could you please provide your forum URL and an account test if possible? An account that can accessible to ACP is also good.

SarkZKalie wrote:Could you please provide your forum URL and an account test if possible? An account that can accessible to ACP is also good.

I can send a PB with the test account logincodes, i don't give admin accounts for my forum (security reason). As you can tell what i can do.
Many thanks.

Edit, PM send.

Thing you could do is show what you did. I didn't see any script that masesm gave you before.

For example :
A script works on all the page and audio html tag must put in overall_header template maybe

This is solved now.
For another members this is the code place this in the

Code: overall_footer_end

template.

Code:

  <script>
        $(document).ready(function(){

            $("a").mouseover (function (){

                $("#mg-song")[0].play();

            });

            $("a").mouseleave (function (){

                $("#mg-song")[0].pause();
                $("#mg-song")[0].currentTime = 0; 

            });

              $('#mg-song').hide();

        });

    </script>

    <audio id="mg-song" controls>
      <source src="HERE YOUR MP3 LINK" type="audio/mpeg" />
    </audio>