[Last Call] Learn how to a build a cloud-first strategyRegister Now


How to make rollover sound using CSS Jquery on a div when rolled in, stop when rolled out but make sound again immediately when rolled over again?

Posted on 2014-08-19
Medium Priority
Last Modified: 2014-08-21
Hello Experts,

Gary was kind enough to help me get a start to add a rollover sound to a div when it is rolled over but the thing is I would like it so that when ever the mouse rollovers the div it will immediately make that  button rollover sound.
Gary gave me a clue using "loop" but the sound keep dinging over and over again if the mouse stayed over the div. Is there a way to make it just make the sound once and not again until another rollover?
Using "pause" made the rollover effect seem inoperable but "loop" was too much.

Thanks in advance.

Original Question and Answer
Question by:colonelblue
  • 3
  • 2
  • 2
LVL 43

Expert Comment

ID: 40271720
The markup looks ok, you don't have the "loop" attribute set so it shouldn't loop.  Do you have a jsfiddle/jsbin for testing?

Author Comment

ID: 40271731
Hello no I don't have JSFiddle.
The loop was later graciously given to me add by Gary butter button keeps playing over and over again if mouse is on the div as opposed to just once which is the desired effect. But always responsive wen rolled over and not delayed.
LVL 43

Expert Comment

ID: 40271752
I would try a different event, so instead of



.mouseenter(function() { ... play() ... })
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

LVL 58

Accepted Solution

Gary earned 2000 total points
ID: 40273289
If it's just a beep then remove the loop and for the jquery just use

$("#hoverme").hover(function () {

Open in new window


Author Comment

ID: 40277171
Thanks again.
So gar awesome. plays once on rollover.
But it plays again on rollout.  
Is there a way to not have a sound on rollout and only on rollover.

Thank you again!
LVL 58

Expert Comment

ID: 40277183
It shouldn't.
Are you sure you are not firing another hover event, maybe your targetting is a bit off.

Author Closing Comment

ID: 40277300
Gary = Awesome

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month18 days, 6 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question