twan twan - 3 months ago 13
CSS Question

Animation script not working in browsers other than Chrome

I got a script which changes the background color of some items when hovering it. This works perfectly in Chrome, but not in Firefox and MS Edge (other browsers I've tested).

Why is that?

Script:

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 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

Other than Chrome, var kleur = ($(ele).css('border-color')); returns nothing and therefore not changing the background using kleur later on.

Chrome support border-color property but with other browsers you have to be specific like below.

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

See the updated code below.

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>