CSS：在背景图像上更改光标

我有一个背景图像作为CSS中的体类的一部分：

body.soon1 {
    background-color: white;
    background-image: url(soon1a.png);
    background-position: center;
    background-repeat: no-repeat;
}

然后我有一个javascript函数,将改变身体类.

我在后台运行图像的原因是,当脚本激活时,背景颜色和背景图像将在完全相同的时间发生变化,您无法选择图像.

是否有可能只在将鼠标悬停在背景图像上时更改光标类型？我明白我可以放

cursor: pointer;

在体型中,但这使光标出现在整个页面上.

单击页面上的任意位置时,可以查看背景更改的live page,currently,.

编辑：我现在有一些对我有用的东西.我添加了一个没有任何内容的居中div：

div.clickme {
width:300px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -200px;
cursor: pointer;
}

这对我有用,因为我可以设置自己的任意区域,但如果有人有更好的解决方案,请告诉我.

解决方法

实际上没有令人信服的理由使图像成为背景图像.将图像放在两个包装器中(无论视口是什么,都需要保证垂直和水平的绝对居中),这样会更好.

您可以通过使用对象填充数组来扩展数组,以便它可以保存图像和正文样式的可能值.这样,即使您希望稍后添加其他更改,也可以使用相同的方法(循环遍历数组)来选择所需的所有更改.

此外,虽然Web浏览器对标准相当宽松,但遵循简单的HTML 5要求并保持功能仍然是微不足道的.

最后,我强烈建议你避免使用我称之为“行家编码”的东西.虽然将函数,变量等命名为晦涩的名称以使检查源代码的少数人感到高兴,但它会使语言变得不必要,并且可维护性降低.简而言之,即使你是唯一的维护者,这也是一种不好的做法.

根据下面的这些注释(使用缩进清理)观察源代码的新版本.

<html>
<head>
    <title>Something Amazing Will Happen</title>
    <style type="text/css">
        body.light {
            background-color: white;
        }
        body.dark {
            background-color: black;
        }
        div.outside-wrapper {
            position: absolute;
            top: 50%;
            width: 100%;
            height: 1px;
            overflow: visible;
        }
        div.inside-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 381px;
            height: 393px;
            margin: -197px 0 0 -191px;
            cursor: pointer;
        }
     </style>
     <script type="text/javascript">
         styleIndex = 0;
         var states = [{style: "light",image: "soon1a.png"},{style: "dark",image: "soon2a.png"}];
         function nextStyle() {
             if (++styleIndex >= states.length)
                 styleIndex = 0;
             var state = states[styleIndex]; 
             document.body.className = state.style;
             document.getElementById("clickme").src = state.image;
         }
         var tap = true;
         document.addEventListener('touchstart',function(e) {
             tap = true;
         });
         document.addEventListener('click',function(e) {
             nextStyle()
             tap = false;
         });
         document.addEventListener('touchmove',function(e) {
             tap = false;
         });
         document.addEventListener('touchend',function(e) {
             if(tap)
                 nextStyle();
         });
    </script>
</head>
<body class="light">
    <div class="outside-wrapper">
        <div class="inside-wrapper">
        <img src="soon1a.png" id="clickme">
        </div>
    </div>
</body>
</html>
<!-- Don't ask me what it is. -->

CSS：在背景图像上更改光标

解决方法

相关文章