Animationsskript funktioniert nicht in anderen Browsern als Chrome

Question

Ich habe ein Skript, das die Hintergrundfarbe einiger Elemente ändert, wenn ich es schwebe. Dies funktioniert perfekt in Chrome, aber nicht in Firefox und MS Edge (andere Browser, die ich getestet habe).

Warum ist das?

Script:

var oldfeatureitem = ''; 
$(document).delegate('div.wrap-feature-item', 'mouseenter',(function(){ 
oldfeatureitem = $(this).clone(); 
var ele = $(this).find('div.front').find('div')[0]; 
var kleur = ($(ele).css('border-color')); 
$(this).find('div.feature-item').css('background-color', kleur); 
    $(this).find('div.front').css('background-color', kleur); 
$(this).css('background-color', kleur); 
$(ele).css('background-color', kleur); 
$(this).find('div.back').css('background-color', kleur); 
})); 

$(document).delegate('div.wrap-feature-item', 'mouseleave',(function(){ 
    $(this).replaceWith(oldfeatureitem); 
})); 

Html Struktur:

<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12 wow fadeInUp pad-5" data-wow-duration="2s" > 
    <div class="wrap-feature-item"> 
     <div class="feature-item"> 
     <a href="diensten/strategie.html"> 
      <div class="front face "> 
       <div class="strategie_ico"><i class="icon-lamp"class="ico"></i></div> 
       <div class="title">Strategie</div> 
      </div> 
     </a> 

      <div class="back face center"> 
       <div class="ico strategie_ico"><i class="icon-lamp"></i></div> 
       <div class="title">Strategie</div> 
       <div class="text"> 
        Lorem ipsumm 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Mit Ausnahme von Chrome gibt var kleur = ($(ele).css('border-color')); nichts zurück und ändert daher den Hintergrund mit kleur später nicht.

Chrome Unterstützung border-color Eigenschaft, aber mit anderen Browsern müssen Sie spezifisch wie unten sein.

$(ele).css("border-top-color"); 
$(ele).css("border-right-color"); 

Siehe den aktualisierten Code unten.

var oldfeatureitem = ''; 
 
$(document).delegate('div.wrap-feature-item', 'mouseenter',(function(){ 
 
oldfeatureitem = $(this).clone(); 
 
var ele = $(this).find('div.front').find('div')[0]; 
 
var kleur = ($(ele).css('border-top-color')); 
 
    console.log(kleur); 
 
$(this).find('div.feature-item').css('background-color', kleur); 
 
    $(this).find('div.front').css('background-color', kleur); 
 
$(this).css('background-color', kleur); 
 
$(ele).css('background-color', kleur); 
 
$(this).find('div.back').css('background-color', kleur); 
 
})); 
 

 
$(document).delegate('div.wrap-feature-item', 'mouseleave',(function(){ 
 
    $(this).replaceWith(oldfeatureitem); 
 
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Html structure: 
 

 
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12 wow fadeInUp pad-5" data-wow-duration="2s" > 
 
    <div class="wrap-feature-item"> 
 
     <div class="feature-item"> 
 
     <a href="diensten/strategie.html"> 
 
      <div class="front face "> 
 
       <div class="strategie_ico"><i class="icon-lamp"class="ico"></i></div> 
 
       <div class="title">Strategie</div> 
 
      </div> 
 
     </a> 
 

 
      <div class="back face center"> 
 
       <div class="ico strategie_ico"><i class="icon-lamp"></i></div> 
 
       <div class="title">Strategie</div> 
 
       <div class="text"> 
 
        Lorem ipsumm 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Das Problem mit Ihrem Code ist, dass in Google den Wert von

var kleur = $(ele).css('border-colour'); 

ist rgb chrom (51, 122, 183) während in anderen Browsern der Wert als leer zurückgegeben wird.

sollte es in chrome leer sein, denn wenn Sie console.log() das Element $ (ele) hat es keine Rahmenfarbe oder wenn Sie es in den Stileigenschaften des Elements überprüfen.

Wenn Sie eine bestimmte Farbe möchten, geben Sie sie der Variable kleur. und es wird funktionieren. Der Grund, dass Ihr Code nicht funktioniert, ist, dass die Variable in anderen Browsern außer Google Chrome einen leeren Wert hat.