css hover in IE 8

Question

Cant get this to work in IE, but works perfect Firefox, is this due to the way i have written my CSS?

Thanks

R

CSS

.theme-default .nivo-directionNav a {
    display:block;
    width:26px;
    height:23px;
    background:  url(../images/arrows-3.png) no-repeat;
    text-indent:-9999px;
    border:0;
}

.theme-default .nivo-directionNav a:hover {
    display:block;
    width:26px;
    height:23px;
    background: url(../images/arrows-over-1.png) no-repeat;
    text-indent:-9999px;
    border:0;
}

Javascript

//Add Direction nav
if(settings.directionNav){ 
    slider.append(
        '<div class="nivo-directionNav">
            <a class="nivo-prevNav">'+ settings.prevText +'</a>
            <a class="nivo-nextNav">'+ settings.nextText +'</a>
        </div>'
    ); 
    //Hide Direction nav 
    if(settings.directionNavHide){ 
        $('.nivo-directionNav', slider).hide();
        slider.hover( function(){ 
            $('.nivo-directionNav', slider).show();
        },
        function(){ 
            $('.nivo-directionNav', slider).hide(); 
        }); 
    }

Answer 1

For best design view in IE6 to 9 you must use javascript libraries below. just call these js only rest will do js.

• important:- these js must be called in head not in body of a file

  1. htmlshiv for html5 new tags
  2. google js for IE
  3. selectivizr js for css3 new classes

Answer 2

For reasons beyond human comprehension IE8 (possibly other versions of IE also) does not apply the :hover state unless a link has an associated href property.

This can be rectified by replacing:

//Add Direction nav
if(settings.directionNav){ 
    slider.append(
        '<div class="nivo-directionNav">
            <a class="nivo-prevNav">'+ settings.prevText +'</a>
            <a class="nivo-nextNav">'+ settings.nextText +'</a>
        </div>'
    ); 
    //Hide Direction nav 
    if(settings.directionNavHide){ 
        $('.nivo-directionNav', slider).hide();
        slider.hover( function(){ 
            $('.nivo-directionNav', slider).show();
        },
        function(){ 
            $('.nivo-directionNav', slider).hide(); 
        }); 
}

with

//Add Direction nav
if(settings.directionNav){ 
    slider.append(
        '<div class="nivo-directionNav">
            <a class="nivo-prevNav" href="#">'+ settings.prevText +'</a>
            <a class="nivo-nextNav" href="#">'+ settings.nextText +'</a>
        </div>'
    ); 
    //Hide Direction nav 
    if(settings.directionNavHide){ 
        $('.nivo-directionNav', slider).hide();
        slider.hover( function(){ 
            $('.nivo-directionNav', slider).show();
        },
        function(){ 
            $('.nivo-directionNav', slider).hide(); 
        }); 
    }

Answer 3

There is no reason this should not work in IE 8. Maybe your image path is incorrect. Also you dont need to repeat porperties in :hover becouse everything is adepted from a-tag.

Try a backgroundcolor and i think it will work. Figure out your problem with the background-image if this works (red background-color on hover state):

.theme-default .nivo-directionNav a {
    display:block;
    width:26px;
    height:23px;
    background:  url(../images/arrows-3.png) no-repeat;
    text-indent:-9999px;
    border:0;
}

.theme-default .nivo-directionNav a:hover {
    background: url(../images/arrows-over-1.png) no-repeat 0 0 #FF0000;
}