Jquery-Ereignis funktioniert nicht

Question

Ich habe dieses Jquery-Ereignis erstellt und möchte die Deckkraft auf meine Schaltfläche anwenden, aber es funktioniert nicht. Bitte helfen Sie!

<button type="button" id="btn-opacity" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Sign-Up 
</button> 

button#btn-opacity { 
    background-color: aqua; 
    border: hidden; 
} 

$(document).ready(function() { 
    $('#btn-opacity').mouseenter(function(event) { 
     /* Act on the event */ 
     $(this).fadeTo('slow', 0.3); 
    }); 
}); 

Answer 1

Hier ist das, was Sie suchen:

$(document).ready(function() { 
 
     $('#btn-opacity').mouseenter(function(event) { 
 
      /* Act on the event */ 
 
      $(this).css('opacity', 0.3); 
 
     }); 
 
     $('#btn-opacity').mouseleave(function(event) { 
 
      /* Act on the event */ 
 
      $(this).css('opacity', 1); 
 
     }); 
 
     });

button#btn-opacity { 
 
    background-color: aqua; 
 
    border: hidden; 
 
} 
 
button { 
 
    transition: all .3s ease-in; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<button type="button" id="btn-opacity" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Sign-Up 
 
</button>

Answer 2

Die Antwort von teuta gegeben funktionieren könnte, aber nur im Fall, dass Sie eine einfache CSS Code für dieses Ereignis versuchen Sie dies:

#btn-opacity:hover{ 
    opacity:0.3; 
}