Is it possible to apply sound effects in hover or click on css?

Question

Is it possible to apply sound effects in hover or click on css?

Navigation

#1 by (4 votes)
#2 by (1 votes)
#3 by (1 votes)

7

Can you give a sound effect when you hover over an object, text, etc.? I wanted to hover over an object with a 'hover' effect to give it a sound effect, any sound that I set, to apply that with Css? or just with JS?

.menu{ display:flex; 
flex-wrap: wrap; 
}
.menu > div{ background-color:#09F; 
padding:20px; 
cursor:pointer;
margin-left:10px;
border-radius:30%;
font-weight:bold;
box-shadow:0 3px 3px rgba(0,0,0,.4);
}
.menu > div:hover{ background-color:#0CC;
transform:scale(1.1); 
box-sizing:border-box; 
box-shadow: 1px 1px 1px 2px #333333;}

<div class="menu">
  <div>Botão-1</div>
  <div>Botão-2</div>
  <div>Botão-3</div>
</div>

html css3

asked by anonymous 25.05.2018 / 17:56

3 answers

4

I believe it is not possible to play a sound with CSS only. The sound on a page runs as a content, using the <audio> element. CSS is used only to

25.05.2018 / 18:11

1

Every page that plays music should have an alternative to being able to stop

I know it's not the focus of the question, but regardless of that, it also plays on the mouseover, but as I said, with CSS it seems to be impossible, at least these days.

            $(document).ready(function(){

                //Plays the file when the mouse is over the element
                $("#song12").mouseover (function (){

                    $("#song1")[0].play();
                    $("#song12").html('MouseClick para Pausa');

                });

                //Pause the file when the mouse leaves the element
                 $("#song12").click(function (){

                    $("#song1")[0].pause();
                    $("#song12").html('MouseOver-me para Play');

                });

            });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><audioid="song1" controls style="display:none">
          <source src="http://kithomepage.com/sos/to_nem_ai.mp3"type="audio/mpeg">
        </audio>
        <button id="song12">MouseOver para Play</button>

25.05.2018 / 20:17

Android: read JSON data How to remove an element from an XML with Python?

score 1 · Accepted Answer

Another option is just without jQuery . You can declare an audio variable and set src to the chosen audio file. Then in btn vc declare the js function in mouseover to play the beep type like this: onmouseover="teste.play()" NOTE: I believe it is not possible to do with CSS

.menu{ display:flex; 
flex-wrap: wrap; 
}
.menu > div{ background-color:#09F; 
padding:20px; 
cursor:pointer;
margin-left:10px;
border-radius:30%;
font-weight:bold;
box-shadow:0 3px 3px rgba(0,0,0,.4);
}
.menu > div:hover{ background-color:#0CC;
transform:scale(1.1); 
box-sizing:border-box; 
box-shadow: 1px 1px 1px 2px #333333;}

<script>
var teste = new Audio();
teste.src = 'https://www.soundjay.com/button/sounds/beep-01a.mp3';
</script>

<div class="menu">
  <div onmouseover="teste.play()">SOM</div>
  <div>Botão-2</div>
  <div>Botão-3</div>
</div>

Here are more details: link