Question

我有4 button个。我试图在opacity上点亮hover。

问题：每次hover时，所有4 button更改opacity都会变亮，我只希望1 button在opacity之后更改hover的时间。

这是我尝试过的：

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

不工作

需要聪明人的好解决方案！

Answer 1

您可以使用$(this)

＆＃13;

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

＆＃13;

button {
  background: red
}

＆＃13;

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

＆＃13;

或者您可以在每个ID上使用button，这是更多的代码，但仍然是一个解决方案。

＆＃13;

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

＆＃13;

button {
  background: red
}

＆＃13;

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

＆＃13;

Answer 2

您可以在函数中使用this或更确切地说$(this)来获取对触发事件的按钮的引用。

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

https://jsfiddle.net/8w0mw2ak/

Answer 3

以上所有答案都很棒！

但如果你只是在寻找效果，你也可以使用CSS3和一些技巧！

取自：https://bootstrapbay.com/blog/css-transitions-buttons/

＆＃13;

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

＆＃13;

<body>
  <button>Fade -2</button>
  <button>Fade -1</button>
  <button>Fade 1</button>
  <button>Fade 2</button>
  <button>Fade 3</button>
</body>

＆＃13;

Answer 4

使用$（this）

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

Answer 5

在函数中使用$（this）。

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

通过鼠标悬停更改按钮/ s的不透明度

5 个答案: