1

IE10 のカーソルに問題がありますか? IE10ではまったく表示されません。

http://jsfiddle.net/alexnode/y4y4A/8/

<div id="bgmbutton1">
        <img id="button1"  src="http://translationgames.org/images/button1overlay.png" alt="Translation games"> 
      <img id="obutton1"  src="http://translationgames.org/images/button1.png" alt="Translation games">
      <div id="otrigger1" class="button" data-case="translation"></div> 
    </div>

CSS

#bgmbutton1{position: fixed;
    left: 2%;
    top: 5%;
    }
#button1 {width: 25%;}
#obutton1 {width: 25%;position: absolute;top:0;left:0;}
#otrigger1 {background:rgba(0,0,0,0); height:100%; width:100%; position: absolute; left: 0; top: 0; cursor: pointer; z-index:5000;}
4

1 に答える 1

1

あなたのアプローチは、物事を少し複雑にしすぎているようです。代わりに、もう少し簡単なアプローチをお勧めします。これをテストして、IE で正常に動作することを確認しました。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hover-Fading Buttons</title>
        <style>
            .button {
                width: 100px;
                height: 100px;
                display: block;
                position: relative;
            }
            .button img {
                border: 0;
                width: 100%;
                top: 0; left: 0;
                position: absolute;
                transition: opacity .5s;
            }
            .button:hover .default {
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <a class="button" href="#">
            <img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
            <img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
        </a>
    </body>
</html>

ご覧のとおり、これはtransitionおよびopacityプロパティに依存しています。古いブラウザーのサポートが必要な場合は、jQuery を使用した JavaScript アプローチに戻ることができます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hover-Fading Buttons</title>
        <style>
            .button {
                width: 100px;
                height: 100px;
                display: block;
                position: relative;
            }
            .button img {
                border: 0;
                width: 100%;
                top: 0; left: 0;
                position: absolute;
            }
        </style>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.js"></script>
        <script>
            $(function () {
                $(document).on("mouseover mouseout", ".button", function () {
                    $(this).find(".default").stop().fadeToggle(300);
                });
            });
        </script>
    </head>
    <body>
        <a class="button" href="#">
            <img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
            <img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
        </a>
    </body>
</html>

これがお役に立てば幸いです。

于 2013-06-23T02:40:06.227 に答える