8

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

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

4

4 回答 4

5

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

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

此外，虽然 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. -->
于 2013-02-16T04:07:31.327 回答
0

试试这个

body.soon1 {
    background-color: white;
    background-image: url(soon1a.png);
    background-position: center;
    background-repeat: no-repeat;
}
body.soon1:active{
    cursor: pointer;
}
于 2013-02-12T22:12:27.813 回答
0

你可以做的是，把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;
}
于 2013-02-12T23:44:51.393 回答
0

像这样的东西应该工作：

<div id="myDiv" style="cursor: pointer">

另一种选择是使用 jQuery，尽管这样做可能有点矫枉过正。无论如何，这就是它的样子：

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

在这里查看：http: //jsfiddle.net/K5fex/

于 2013-02-12T23:59:07.507 回答