动画脚本无法在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

除Chrome之外， var kleur = ($(ele).css('border-color')); 不返回任何内容，因此以后不会使用kleur更改背景。

Chrome支持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

您的代码存在的问题是，在Google Chrome中，

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

为rgb（51，122，183），而在其他浏览器中，该值返回为空。

它在chrome中应该为空，因为如果console.log（）元素$（ele）没有边框颜色，或者在元素的样式属性中进行了检查。

如果您想要特定的颜色，则将其提供给kleur变量。 它会工作。 因此，您的代码无法正常工作的原因是，除google chrome之外的其他浏览器中的变量的值为空。