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