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>

如您所见，这确实依赖于transitionandopacity属性。如果您需要对旧版浏览器的支持，您可以回到使用 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 回答