CSS 悬停在 IE 8 中

Question

无法让它在 IE 中运行，但在 Firefox 中运行完美，这是因为我编写 CSS 的方式吗？

谢谢

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

出于人类无法理解的原因，IE8(也可能是其他版本的 IE)不应用 :hover 状态，除非链接具有关联的 href 属性。

这可以通过替换来纠正:

//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(); 
        }); 
}

与

//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(); 
        }); 
    }