jquery - Change opacity of button/s over mouse hover -
i have 4 button
s. trying lighten opacity
upon hover
.
problem: every time hover
, 4 button
s change opacity
lighten , 1 button
@ time change opacity
upon hover
.
here's i've tried:
$(document).ready(function() { $('button').mouseenter(function() { $('button').fadeto('fast', 1); }); $('button').mouseleave(function() { $('button').fadeto('fast', 0.5); }); });
not working
need solutions smart peoples!
you can 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 can use id
on each button
, lot more code, still 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>
Comments
Post a Comment