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
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
    LVL 42

    Expert Comment

    by:Rob Jurd, EE MVE
    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

    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 42

    Expert Comment

    by:Rob Jurd, EE MVE
    I would try a different event, so instead of



    .mouseenter(function() { ... play() ... })
    LVL 58

    Accepted Solution

    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

    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

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

    Author Closing Comment

    Gary = Awesome

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    761 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

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now