我有4 button s。我试图通过hover减轻opacity。更改鼠标悬停按钮的不透明度
问题：我每次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);
});
});
不工作
从你的智能民族需要有很好的解决方案！
你可以使用$(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>，或者你可以在每个button，这是一个很大的代码中使用ID，但仍然是一个解决方案。
$(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>谢谢！我有每个按钮的HTML内的类。这里是什么样子：
\t \t \t \t \t \t \t 什么我应该用呢？ :)该代码没有错:)。 如果这解决了你的问题，你应该将答案标记为接受:) – dippas
我会但它仍然不工作：/不知道我做错了什么。我有正确的。和＃选择器...... –
以上所有的答案都是伟大的！
但是，如果你只是在寻找效果，你也可以使用CSS3和一些技巧！
来自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>谢谢。我不熟悉我支持在HTML中加入的按钮段。 –
您可以使用this或者说$(this)功能中去触发事件的按钮的引用。
$('button').mouseenter(function() {
$(this).fadeTo('fast', 1);
});
$('button').mouseleave(function() {
$(this).fadeTo('fast', 0.5);
});
使用$（本）
$(document).ready(function() {
$('button').mouseenter(function() {
$(this).fadeTo('fast', .5);
});
$('button').mouseleave(function() {
$(this).fadeTo('fast', 1);
});
});
使用$（本）的函数内部。
$(document).ready(function() {
$('button').mouseenter(function() {
$(this).fadeTo('fast', 1);
});
$('button').mouseleave(function() {
$(this).fadeTo('fast', 0.5);
});
});
你只想按住按钮来改变不透明权吗？ –
使用'$（this）'而不是'$（button）' – andrew
请分享您的HTML代码。 –