CSS наведите курсор в IE 8 - PullRequest
Новая
       11

CSS наведите курсор в IE 8

0 голосов
/ 30 января 2012

Не могу заставить это работать в 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(); 
        }); 
    }

Ответы [ 3 ]

2 голосов
/ 17 мая 2012

По причинам, выходящим за рамки человеческого понимания 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(); 
        }); 
    }
0 голосов
/ 18 июля 2013

Для лучшего представления дизайна в IE6 до 9 вы должны использовать библиотеки javascript ниже.просто назовите эти JS только остальные сделают JS.

  • важно: - эти js должны вызываться в голове, а не в теле файла

    1. htmlshiv для новых тегов html5
    2. google js для IE
    3. selectivizr js для новых классов css3
0 голосов
/ 30 января 2012

Нет причин, по которым это не должно работать в 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;
}
...