2017-02-03 21 views
0

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> 
 

+1

Sie brauchen jQuery dafür nicht. Was genau ist das Problem, das Sie haben? – Schlaus

+0

Ohhhhhh .. Nun, ich habe das Ei auf meinem Gesicht. – scoopzilla

+0

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

Antwort

-2

@ arthur-medeiros Ihre anwser ist schlecht, weil Autor nicht auf die Schaltfläche Hintergrund ändern muss aber Bodys

Ich glaube nicht, dass allein jQuery Lage sein wird, Ihr Problem zu lösen. Wahrscheinlich werden Sie ein Plugin benötigen, das den Übergang animiert.

+0

Ich würde nicht gerne zustimmen, aber Arthur's Antwort ist richtig. Sie würden den BODY – scoopzilla

+0

nicht ändern schau auf seine Funktion, er stellt Hintergrund von Element mit ID BG, die in seinem Code ist Körper –

+0

Ich bin, und wir sind anderer Meinung, dass Sie dies mit 'Javascript' sowieso tun möchten, da der gleiche Effekt in CSS3 beschrieben werden kann sollte versuchen, keine Bilder für die Navigation zu verwenden, wo es möglich ist – scoopzilla

0

Haben Sie CSS-Eigenschaft Übergang Versuchen Sie es mit?

http://www.w3schools.com/css/css3_transitions.asp

.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 
{ 
    transition: banckground 1s 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; 
} 
+0

Ich habe deinen Kommentar versehentlich geändert. MY BAD :( – scoopzilla

+0

Versuchte, dass es nicht funktionieren konnte, da ich den Hintergrund des Körpers zum Übergang und nicht die Schaltfläche benötigt. –

0

.button-array { 
 
    text-align: center; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-flex-wrap: nowrap; 
 
    -ms-flex-wrap: nowrap; 
 
    flex-wrap: nowrap; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-align-content: center; 
 
    } 
 

 
.button { 
 
    font-size: 21px; 
 
    text-align: center 
 
    align-self: auto; 
 
    padding: 20px; 
 
    -webkit-transition:all 0.3s ease 0s; 
 
    -moz-transition:all 0.3s ease 0s; 
 
    transition: all 0.3s ease 0s 
 
    } 
 

 
.button:hover { 
 
    background-color: #ccc; 
 
    background-image: url(http://i66.tinypic.com/3029ua0.jpg); 
 
    }
<div class="button-array"> 
 
    <div class="button"> 
 
    Our Instruments 
 
    </div> 
 
<div class="button"> 
 
    Our Parts 
 
    </div> 
 
    <div class="button"> 
 
    Contact Us 
 
    </div> 
 
    </div>

Sie bei CSS aussehen sollte dies für Sie tun, da es leichter zu kontrollieren und zu ändern ist, wenn Sie benötigen. Ich habe die flex Klasse verwendet, um meine Ausrichtung zu erstellen, und die :hover Klasse, um den Effekt zu erstellen. Sie können dies auch mit einem Bildhintergrund tun.

2

Button Hintergrund ändern sich perfekt mit Jquery. Demo (Live-Beispiel): -

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> 

Script: -

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

Thi s Arbeit Perfekt mit jquery

Hoffe seine Arbeit !!

+0

Danke, es funktioniert, aber diese Art, Hintergründe zu ändern, ist ohne Übergang. Vielen Dank für Ihre Antwort! –

0

Sie müssen die Deckkraft dafür verwenden, aber die Deckkraft des Körpers würde die gesamte Seite unsichtbar machen.

Ich habe ein Pseudo-Element für diesen Zweck verwendet.

Da dies ein Ausschnitt ist, auf dem Körper ein ID-Einstellung ist nicht posible (oder zumindest ich weiß nicht, wie es zu tun), so an den Körper bekommen ist ein wenig schwieriger:

let test = document.getElementById('test'); 
 
let body = document.getElementsByTagName('body')[0]; 
 
test.addEventListener("mouseenter",function(){ 
 
    body.className = 'active'; 
 
}); 
 
test.addEventListener("mouseout",function(){ 
 
    body.className = ''; 
 
});
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
body:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-image: url(http://lorempixel.com/400/200); 
 
    background-size: cover; 
 
    opacity: 0; 
 
    transition: opacity 0.5s; 
 
    z-index: -1; 
 
} 
 

 
body.active:after { 
 
    opacity: 1; 
 
} 
 

 
#test { 
 
    width: 80px; 
 
    height: 50px; 
 
    border: solid 1px red; 
 
    background-color: white; 
 
    margin: 10px; 
 

 
}
<div id="test">test</div>

0

kann u css3 Übergang Eigenschaft wie verwenden ..

.Button 
{ 
    /*ur code*/ 
    ....... 
    transition:all 0.8s; 
} 
.Button:hover 
{ 
    /*ur code*/ 
    ....... 
    background-image: url(http://i66.tinypic.com/3029ua0.jpg); 
} 
+0

Diese Methode ändert das Hintergrundbild der Schaltfläche anstelle des Textkörpers –