动画脚本在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之外的其他浏览器中的变量有一个空值。