Есть ли IE a: hover fix? - PullRequest
Новая
       2

Есть ли IE a: hover fix?

3 голосов
/ 27 мая 2011

Я работаю над дизайном веб-сайта, и у меня есть несколько эффектов наведения изображения, которые включают элементы на изображении, появляющиеся при наведении курсора на изображение. Он отлично работает на Chome, Safari и FF, но не работает на IE, потому что на IE код: hover работает ТОЛЬКО на: hover. Есть ли способ предоставить исправление javascript для этого или добавить привязку ко всему div, чтобы он работал в любом браузере? Вот мой код: 

    <html>
<head>
<style>
body { background: #FFF; }

#postimage {
width: 500px;
height: 335px;
}

#topbar {
width: 500px;
background: rgba(0, 0, 0, 0.75);
height: 50px;
position: absolute;
z-index: 999;
}

#bottombar {
width: 500px;
background: rgba(0, 0, 0, 0.75);
height: 50px;
position: absolute;
z-index: 999;
margin-top: -50px;
}

#postimage div#bottombar{
    display: none;
}

#postimage:hover div#bottombar {
    display: inline;
}

#postimage div#topbar{
    display: none;
}

#postimage:hover div#topbar {
    display: inline;
}

</style>
</head>
<body>
<div id="postimage">
<div id="topbar">1</div>
<img src="http://28.media.tumblr.com/tumblr_lltiujAaV81qghzpno1_500.jpg" border="0">
<div id="bottombar">2</div>
</div>

Ответы [ 6 ]

1 голос
/ 27 мая 2011

Эта проблема с IE, работающим только с элементами <a>, является проблемой только с IE6 и ниже.

Мой первый совет - просто отказаться от поддержки IE6. У него действительно слишком много проблем и слишком низкая доля рынка, чтобы его можно было поддержать в наши дни. (доля рынка IE6 уже была низкой, но за последние шесть месяцев упала с обрыва). Если ваш начальник или клиент настаивает на том, чтобы вы поддержали его, вы должны заранее сообщить им, что это удвоит стоимость разработки и обслуживания.

Тем не менее, я принимаю, что на некоторых сайтах есть обстоятельства, которые требуют, чтобы они продолжали поддерживать IE6, поэтому, если это вы, вам будет приятно узнать, что исправить ошибку при наведении очень просто.

Существует CSS-хак с именем Что бы то ни было: hover . Просто скачайте файл на этой странице, свяжите его с таблицей стилей в соответствии с инструкциями, и hover будет работать везде в IE6. Магия.

1 голос
/ 27 мая 2011

Это не работает в IE, потому что в IE код: hover работает ТОЛЬКО на: hover

Это верно только для IE6 или для более новых версий , когда IE находится в Режиме причуд .

Добавьте doctype в качестве первой строки, и он будет работать в IE7 +

Лучший выбор - это доктайп HTML5: 

<!DOCTYPE html>

Существует еще одна проблема с вашей страницей, из-за которой она выглядит так, как будто она не работает в IE: 

background: rgba(0, 0, 0, 0.75);

rgba не поддерживается в IE до версии 9.

Вот версия вашей страницы, которая будет работать в более старых версиях, потому что я добавил запасной background из #000, просто чтобы доказать, что :hover работает в IE:

http://jsbin.com/epome3/2

Я также изменил display: inline на display: block, потому что так оно и должно быть.

1 голос
/ 27 мая 2011

Это то, что мы сделали на одном из наших сайтов, чтобы заставить :hover работать над <li> элементами в IE:

Получить файл http://peterned.home.xs4all.nl/htc/csshover3.htc из http://peterned.home.xs4all.nl/csshover.html. Этоявляется файлом поведения IE, и автор лицензирует его в соответствии с GNU Lesser General Public License.

Затем в вашем файле css: 

body
{
    behavior: url("/css/csshover3.htc"); /* This is an IE-only property that fixes the fact the ":hover" doesn't work on all elements in IE. */
}
1 голос
/ 27 мая 2011

Попробуйте добавить в заголовок строгий тип документа: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Это должно помочь исправить это. Theres также исправление, названное как угодно: зависание. Я не пробовал это все же.

1 голос
/ 27 мая 2011

Попробуйте этот javascript, чтобы добавить: зависание в IE 6 + 

$.ie6CssFix = function() {

        if($.browser.msie && $.browser.version < 7) {


            var cssRules = [], newStyleSheet = document.createStyleSheet();

            $("style,link[type=text/css]").each(function() {

                    if(this.href) {
                        $.get(this.href,function(cssText) {
                            parseStyleSheet(cssText);
                        }); 
                    } else {
                        parseStyleSheet(this.innerHTML);
                    }
            });

            function parseStyleSheet(cssText) {
                var cssText = cssText.replace(/\s+/g,'');
                var arr = cssText.split("}");
                var l = arr.length;
                for(var i=0; i < l; i++) {
                    if(arr[i] != "") {
                        parseRule(arr[i] + "}");    
                    }
                }
            }

            function parseRule(rule) {


                var pseudo = rule.replace(/[^:]+:([a-z-]+).*/i, '$1');

                if(/(hover|after|focus)/i.test(pseudo)) {

                    var prefix = "ie6fix-";
                    var element = rule.replace(/:(hover|after|before|focus).*$/, '');
                    var className = prefix + pseudo;
                    var style = rule.match(/\{(.*)\}/)[1];

                    var h =  getPseudo(pseudo);
                    if(h) {
                        h(element,className);
                    }

                    newStyleSheet.addRule(element + "." + className,style);
                }
            }

            function handleHover(e,c) {
                $(e).hover(function() {$(this).addClass(c);}, function() {$(this).removeClass(c);});
            }

            function handleFocus(e,c) {
                $(e).focus(function() { $(this).addClass(c); }).blur(function() {$(this).removeClass(c);});
            }

            function handleAfter(e,c) {
                $(e).after(
                    $("<" + e + "></" + e + ">").addClass(c)
                );
            }

            function getPseudo(pseudo) {
                switch (pseudo) {
                    case "hover": return handleHover;
                    case "focus": return handleFocus;
                    case "after": return handleAfter;
                    default: return false;
                }

            }
        }
    };

    $(function() {
        $.ie6CssFix();
    });

Вы можете проверить это на: http://lovepeacenukes.com/jquery/ie6cssfix/

1 голос
/ 27 мая 2011

Да, см., Например, методы jQuery .mouseenter () и .mouseleave () .

Кроме того, вам может понадобиться .toggle () и .css () .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...