当我将鼠标悬停在我的按钮上时，我试图使背景图像平滑过渡。我曾尝试在许多已回答的帖子中寻找一种方法，但我无法将其中任何一个应用到我的代码中。 我知道我需要使用 J Query，但我也无法让它工作。 没有 J Query 试验和错误的当前代码: http://jsfiddle.net/6YEAG/26/
function SwapInst()
{
document.getElementById("BG").style.backgroundImage = "url(/Images/Instruments.jpg)";
}.Button
{
background: rgba(255, 255, 255, .5);
font-family: 'Cinzel', serif;
font-size: 20px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.Button:hover
{
background: rgba(15, 0, 0, 0.3);
font-family: 'Cinzel', serif;
border: none;
color: black;
padding: 13px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
} <body class="body" id ="BG" style="height: 645px; background-image:url(/Images/Menu.jpg); background-size:auto;">
<div style="font-size: 25px; color: black; text-align:center;" id ="MainHeader">
<br />
<h1> RED INSTRUMENTS </h1>
<h2> Instruments and parts shop </h2>
</div>
<div style="font-size: 30px; color: black; text-align: center;">
<br />
<br />
<br />
<input class="Button" onmouseover="SwapInst()" id="InstButton" type="button" value="Our Instruments" />
<input class="Button" id="PartsButton" type="button" value="Our Parts" />
<input class="Button" id="ContactButton" type="button" value="Contact us" />
</div>
</body>
最佳答案
Button Background 使用 Jquery 完美改变。 演示(现场示例):-
https://jsfiddle.net/dhirenpateldev/dmtz34ma/1/
HTML:-
<body class="body" id ="BG" style="height: 645px;">
<div style="font-size: 25px; color: black; text-align:center;" id ="MainHeader">
<br />
<h1> RED INSTRUMENTS </h1>
<h2> Instruments and parts shop </h2>
</div>
<div style="font-size: 30px; color: black; text-align: center;">
<br />
<br />
<br />
<input class="Button" id="InstButton" type="button" value="Our Instruments" />
<input class="Button" id="PartsButton" type="button" value="Our Parts" />
<input class="Button" id="ContactButton" type="button" value="Contact us" />
</div>
</body>
脚本:-
$(document).ready(function() {
$("#InstButton").on({
mouseenter: function() {
$("#BG").parent().css('background-color', 'red');
// $("#BG..parent().css('background-image', "url('/ Put Your Web Link Here /')");")
},
mouseleave: function() {
$("#BG").parent().css('background-color', 'White');
}
});
$("#PartsButton").on({
mouseenter: function() {
$("#BG").parent().css('background-color', 'green');
},
mouseleave: function() {
$("#BG").parent().css('background-color', 'White');
}
});
$("#ContactButton").on({
mouseenter: function() {
$("#BG").parent().css('background-color', 'blue');
},
mouseleave: function() {
$("#BG").parent().css('background-color', 'White');
}
});
});
CSS:-
.Button
{
background: rgba(255, 255, 255, .5);
font-family: 'Cinzel', serif;
font-size: 20px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.Button:hover
{
background: rgba(15, 0, 0, 0.3);
font-family: 'Cinzel', serif;
border: none;
color: black;
padding: 13px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
}
这项工作完美地使用 jquery
希望它的工作!!
关于javascript - 按钮悬停问题的背景过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42029518/