CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Aisha Salman
Aisha Salman

Reputation: 776

Jquery event not working

I've made this Jquery event and want to apply opacity on my button but it's not working.Please help!

<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);
    });
});

Upvotes: 0

Views: 63

Answers (2)

Shrikantha Budya
Shrikantha Budya

Reputation: 644

The answer given by teuta might work but just in case you want a simple css code for this event try this:

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

Upvotes: 1

Teuta Koraqi
Teuta Koraqi

Reputation: 1898

Here is what you are looking for:

   $(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>

Upvotes: 2

Related Questions