Ich versuche, den Hintergrund Bild Übergang reibungslos, wenn ich über meine Schaltflächen schweben. Ich habe versucht, in vielen beantworteten Posts nach einem Weg zu suchen, aber ich konnte keinen von diesen auf meinen Code anwenden. Ich verstehe, dass ich J Query verwenden muss, aber ich kann es auch nicht funktionieren. Aktuelle Code ohne J Abfrage Versuch und Irrtum: http://jsfiddle.net/6YEAG/26/Hintergrund Übergang auf Schaltfläche Hover Probleme
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>
Sie brauchen jQuery dafür nicht. Was genau ist das Problem, das Sie haben? – Schlaus
Ohhhhhh .. Nun, ich habe das Ei auf meinem Gesicht. – scoopzilla
Mein Problem ist, dass ich nicht herausfinden kann, wie man einen fließenden Übergang am Körper durch einen Knopf auslösen kann. Ich dachte mir, dass ich CSS und JQuery dafür verwenden musste, weil ich keine anderen Wege finden konnte und wegen meiner Unerfahrenheit mit ihnen. –