CSS：更改背景上的光标

2018-06-24 18:02:49

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

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

然后，我有一个JavaScript函数，将改变主体类。

我在后台创建图像的原因是，当脚本激活时，背景颜色和背景图像将完全同时更改，并且无法选择图像。

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

cursor: pointer;

在主体样式中，但是这会使光标出现在整个页面上。

您可以查看当前的实时页面，当您单击页面上的任何位置时，背景更改的位置。

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

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

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

真的没有令人信服的理由使图像成为背景图像。通过将图像放在两个包装中（不管视口如何，要求保证垂直和水平方向的绝对中心），您的服务会更好。

您可以通过填充对象来扩展数组，以便它可以保存图像和主体样式的可能值。这样，即使您想稍后添加其他更改，也可以使用相同的方法（遍历数组）循环选择所需的所有更改。

另外，虽然网络浏览器对标准相当宽松，但符合简单的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. -->

尝试这个

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

你可以做的是，将cursor: pointer放在主体上，并将光标更改为子项。做这样的事情：http://jsfiddle.net/HSdH3/

HTML：

<body>
    <div></div>
</body>

CSS：

body {
    background: red;
    width:100%;
    height: 100%;
}
body:hover {
    cursor: pointer;
}
div {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background: white;
}
div:hover {
    cursor: auto;
}

链接地址: http://www.djcxy.com/p/69325.html

上一篇: CSS: Change Cursor over background

下一篇: in Code in VS 2012