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

Answer 2

没有理由这在IE 8中不起作用。可能你的图像路径不正确。此外，您不需要重复以下内容：hover因为所有内容都来自a-tag。

尝试backgroundcolor，我认为它会起作用。如果可行，请使用背景图像找出问题（悬停状态下的红色背景颜色）：

.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;
}

Answer 3

要获得IE6至9中的最佳设计视图，您必须使用下面的JavaScript库。只是调用这些js只休息会做js。

重要： - 这些js必须在头部而不是在文件正文中调用
1. htmlshiv用于html5新标记
2. google js
3. selectivizr js for css3 new classes

css在IE 8中悬停

3 个答案: