Fatal编程技术网
  • css/
  • CSS：在背景图像上更改光标

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

css

CSS：在背景图像上更改光标,css,cursor,background-image,Css,Cursor,Background Image,我有一个背景图像作为CSS中body类的一部分： body.soon1 { background-color: white; background-image: url(soon1a.png); background-position: center; background-repeat: no-repeat; } 后来我有了一个javascript函数，它将改变body类 我将图像置于背景中的原因是，当脚本激活时，背景颜色和背景图像将同时更改，并且您无法选择图

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

body.soon1 {
    background-color: white;
    background-image: url(soon1a.png);
    background-position: center;
    background-repeat: no-repeat;
}
后来我有了一个javascript函数，它将改变body类

我将图像置于背景中的原因是，当脚本激活时，背景颜色和背景图像将同时更改，并且您无法选择图像

是否可能只有在将光标悬停在背景图像上时才能更改光标类型？我知道我可以

cursor: pointer;
在主体样式中，但这会使光标显示在整个页面上

单击页面上的任意位置时，可以查看背景更改的位置

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

div.clickme {
width:300px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -200px;
cursor: pointer;
}
这对我很有用，因为我可以设置自己的任意区域，但如果有人有更好的解决方案，请告诉我。

试试这个

body.soon1 {
    background-color: white;
    background-image: url(soon1a.png);
    background-position: center;
    background-repeat: no-repeat;
}
body.soon1:active{
    cursor: pointer;
}
您可以做的是，将
光标：指针
放在主体上，然后将光标更改为child。做这样的事：

html:

像这样的方法应该会奏效：

另一种选择是使用jQuery，尽管这可能有点过分。不管怎样，下面是它的样子：

$(document).ready(function(){
    $("#myDiv").hover(function() {
        $(this).css('cursor', 'pointer');
    });
});
请在此处查看：

确实没有令人信服的理由将图像设置为背景图像。将图像放在两个包装器中会更好（无论视口如何，都需要确保绝对垂直和水平居中）

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

此外，虽然web浏览器对标准相当宽容，但遵守简单的HTML5要求并保持功能确实很简单

最后，我强烈建议您避免我所说的“hipster编码”。虽然用模糊的名称命名函数、变量等以取悦少数检查源代码的人很有趣，但这会导致语言不必要的迟钝和较低的可维护性。简而言之，这是一种糟糕的做法，即使您是唯一的维护人员

根据下面的注释（使用缩进清理）观察源代码的新版本


一些令人惊奇的事情将会发生
车身灯{
背景色：白色；
}
身体黑{
背景色：黑色；
}
分区外包装{
位置：绝对位置；
最高：50%；
宽度：100%；
高度：1px；
溢出：可见；
}
分区内包装{
位置：绝对位置；
最高：50%；
左：50%；
宽度：381px；
身高：393px；
利润率：-197px0-191px；
光标：指针；
}
styleIndex=0；
var states=[{style:“light”，image:“soon1a.png”}，{style:“dark”，image:“soon2a.png”}]；
函数nextStyle（）{
if（++styleIndex>=states.length）
styleIndex=0；
var state=状态[styleIndex]；
document.body.className=state.style；
document.getElementById（“clickme”）.src=state.image；
}
var-tap=true；
document.addEventListener（'touchstart'，函数（e）{
tap=真；
});
document.addEventListener（'click'，函数（e）{
nextStyle（）
点击=假；
});
文档.添加的事件列表器（'touchmove'，函数（e）{
点击=假；
});
文档.添加的EventListener（'touchend'，函数（e）{
如果（点击）
nextStyle（）；
});
为什么不将背景图像放在一个div上，以页面为中心。然后你可以在div上添加光标。我有类似的东西，但是对于表，问题是你可以选择图像，如果你点击的速度足够快，你可以看到图像的遮罩，这两个看起来都不是很好。这对我来说比光标更重要，我只是想看看是否两者都可以。谢谢，thoughI将其添加到html中。似乎不起作用。我还尝试了body.soon1。背景图像：活动和body.soon1：悬停。没有运气。这实际上与我想做的完全相反，但很高兴知道你能做到。谢谢对于后代来说，我已经将原始（当前）源代码发布到了pastebin，因此如果live页面发生变化，我的评论会更有意义：我使用这种方法的问题是背景颜色和图像不会完全同时发生变化，因此您可以在那一瞬间看到png的轮廓。正如我在另一篇评论中提到的，这对我来说比光标更重要。当第二个图像还没有加载时，它会变得更加明显，这就是为什么会有一个不可见的图像样式预加载第二个图像。此外，如果无法通过单击和拖动来选择图像，我更愿意这样做。如果有办法防止这种情况发生，并冻结页面，使图形更改完全同时出现，如果我的方法导致视口问题，我很乐意将图像保留在背景之外。在我有限的理解范围内，把它放在后台可以方便地解决这两个问题。此外，隐形divs方法允许我设置任意区域。我确实喜欢更高效的阵列，它将所有内容捆绑在一起，尤其是在我计划添加更多图像时。 
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;
}

$(document).ready(function(){
    $("#myDiv").hover(function() {
        $(this).css('cursor', 'pointer');
    });
});

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