Chrome以外のブラウザでアニメーションスクリプトが動作しない

Question

一部の項目の背景色を変更するスクリプトがあります。これはChromeでは完全に機能しますが、FirefoxやMS Edge（テストした他のブラウザ）では動作しません。

なぜですか？

スクリプト：

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構造：

<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

クロム以外は、var kleur = ($(ele).css('border-color'));は何も返さないため、後でkleurを使用して背景を変更しません。

クロムサポートborder-colorプロパティですが、他のブラウザでは以下のように具体的にする必要があります。

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

下記の更新されたコードを参照してください。

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

コードに問題がグーグルで

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

の値がRGB（51、122であるクロムことです、 183）、他のブラウザでは空の値が返されます。

これは、console.log（）の要素$（ele）にborder-colorがないか、要素のスタイルプロパティでチェックすると、chromeで空白にする必要があります。

特定の色を使用する場合は、kleur変数に指定します。それは動作します。 コードが機能しない理由は、Google Chrome以外のブラウザの変数が空の値を持つためです。