Question

我对IE10中的光标有什么问题吗？它在IE10中根本没有出现。

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

Answer 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>

我希望这会对你有所帮助。

cursor：指针在透明触发器覆盖上不起作用？

1 个答案: