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

您的代码存在的问题是谷歌浏览器中的值为

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

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

它应该在chrome中为空，因为如果你在console.log（）元素$（ele）它没有border-color，或者如果你在元素的样式属性中检查它。

如果您想要特定的颜色，请将其赋予kleur变量。它会起作用。因此，您的代码无效的原因是除了Google Chrome之外的其他浏览器中的变量都有空值。

动画脚本无法在Chrome以外的浏览器中使用

2 个答案: