Question

I’m using the jQuery library, This is my code:

CSS:

.card{
    hight: 100px;
    width: 100px;
    background-color: black;
    opacity: 0.2;
}

HTML:

<div class="card"></div>

Javascript:

$(".card").hover(function () {
    alert($(this).css("opacity"))
});

The opacity option is working for every browser (the box is has transparency), but
Chrome, Firefox and Safari are showing me a popup with value “0.20000002345”. Only Internet Explorer 9 is showing “1”.

Answer 1

CSS for opacity in IE (version <9)

filter:alpha(opacity=20);

jQuery for it:

$(".card").hover(function () {
    alert($(this).css("opacity"));
    var filter = $(this).css('filter');
    if (filter) {
        filter = parseInt( filter.replace(')','').replace('alpha(opacity=','') ) / 100; }

        alert(filter);
});​

Example on jsFiddle