我有一个背景图像作为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. -->
