CODEWITHSUNDEEP
jqueryhtmlcss
kristina laude
kristina laude

Reputation: 13

Change opacity of button/s over mouse hover

I have 4 buttons. I am trying to lighten opacity upon hover.

PROBLEM: Every time I hover, all 4 buttons change opacity to lighten and I only would like 1 button at a time to change opacity upon hover.

Here's what I've tried: 

$(document).ready(function() {
   $('button').mouseenter(function() {
       $('button').fadeTo('fast', 1);
   });
       $('button').mouseleave(function() {
       $('button').fadeTo('fast', 0.5);
   });
   });

NOT WORKING

Need good solutions from you smart peoples!

Upvotes: 1

Views: 492

Answers (5)

dippas
dippas

Reputation: 60563

you can just use $(this) 

$(document).ready(function() {
   $('button').mouseenter(function() {
     $(this).fadeTo('fast', 1);
   });
   $('button').mouseleave(function() {
     $(this).fadeTo('fast', 0.5);
   });
   
 });
button {
  background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>
<button id="button4">button4</button>

or you can to use ID on each button , which is a lot more code, but still a solution. 

 $(document).ready(function() {
   $('#button1').mouseenter(function() {
     $('#button1').fadeTo('fast', 1);
   });
   $('#button1').mouseleave(function() {
     $('#button1').fadeTo('fast', 0.5);
   });
   $('#button2').mouseenter(function() {
     $('#button2').fadeTo('fast', 1);
   });
   $('#button2').mouseleave(function() {
     $('#button2').fadeTo('fast', 0.5);
   });
   $('#button3').mouseenter(function() {
     $('#button3').fadeTo('fast', 1);
   });
   $('#button3').mouseleave(function() {
     $('#button3').fadeTo('fast', 0.5);
   });
   $('#button4').mouseenter(function() {
     $('#button4').fadeTo('fast', 1);
   });
   $('#button4').mouseleave(function() {
     $('#button4').fadeTo('fast', 0.5);
   });
 });
button {
  background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>
<button id="button4">button4</button>

Upvotes: 1

Saleh Ahmad Oyon
Saleh Ahmad Oyon

Reputation: 672

Use $(this) inside the function.

$(document).ready(function() {    
    $('button').mouseenter(function() {
        $(this).fadeTo('fast', 1);
    });
    $('button').mouseleave(function() {
        $(this).fadeTo('fast', 0.5);
    });
});

Upvotes: 0

aquaflamingo
aquaflamingo

Reputation: 822

All above answers are great!

But If you are just looking for the effect, you can use CSS3 and a couple of tricks too!

Taken from: https://bootstrapbay.com/blog/css-transitions-buttons/

button {
  background: #428BCA;
  color: #fff;
  font-family: Sans-serif;
  font-size: 20px;
  height: 60px;
  width: 150px;
  line-height: 60px;
  margin: 25px 25px;
  text-align: center;
  border: 0;
  transition: all 0.3s ease 0s;
}

/** Effect **/
button {
  opacity: 1;
}
button:hover {
  opacity: 0.75;
}
<body>
  <button>Fade -2</button>
  <button>Fade -1</button>
  <button>Fade 1</button>
  <button>Fade 2</button>
  <button>Fade 3</button>
</body>

Upvotes: 0

Thom Koled
Thom Koled

Reputation: 1

use $(this)

$(document).ready(function() {
   $('button').mouseenter(function() {
   $(this).fadeTo('fast', .5);
});
   $('button').mouseleave(function() {
   $(this).fadeTo('fast', 1);
   });
 });

Upvotes: 0

Mike Scotty
Mike Scotty

Reputation: 10782

You can use this or rather $(this) within the functions to get a reference to the button that triggered the event.

$('button').mouseenter(function() {
    $(this).fadeTo('fast', 1);
});
$('button').mouseleave(function() {
    $(this).fadeTo('fast', 0.5);
});

https://jsfiddle.net/8w0mw2ak/

Upvotes: 1

Related Questions