Question

所以，我有一个我正在处理的小网站 - 它非常简单，我只是用它来使用C ++和Javascript COM接口，按位运算符。

但是我对这些简单的东西感到困惑。

这里分别是我的HTML，CSS和jQuery代码（为jsfiddle格式化）。

<title>Can you guess the combination?</title>
<body>
    <div>
        <label id="instructions">Guess the combination and you win!</label>
    </div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
</body>

.button {
    background-color:#0F0;
    width:3em;
    height:3em;
    display:table-cell;
    float:left;
    margin:0.5em;
}
#instructions {
    font-family:roboto;
    font-color:#bbbbb;
}
a {
    font-family:roboto;
}

$(document).ready(function () {
    $(".button").hover(

    function () {
        $(this).css("background", "#ddd");
    },

    function () {
        $(this).css("background", "#ccc");
    });
});

Here是我所拥有的东西，在盒子上方盘旋会导致它们改变颜色。我无法让这个例子有效。这很简单，但我似乎无法说出我所做的事情。

稍后我会有更高级的功能，但因为我已经厌倦了自己盯着它。

您有什么想法，{StackOverflow会员}？

Answer 1

将CSS用于此

.button {background-color: #ddd;}
.button:hover {background-color: #ccc;}

Answer 2

更新了JSFiddle here。

问题是jQuery没有包含在jsFiddle中，没有理由拥有$('document').ready()，正确的CSS是background-color，而不是background

此处代码

$(".button").hover(
    function () {
        $(this).css("background-color", "#ddd");
    }, 
    function () {
        $(this).css("background-color", "#ccc");
    }
);

Answer 3

你需要专注于JS Fiddle的左上角，并将第一个下拉值更改为如下图所示：

JS Fiddle Screen Shot

Answer 4

This is working correctly 
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
    $(".button").hover(

    function () {
        $(this).css("background", "#ddd");
    },

    function () {
        $(this).css("background", "#ccc");
    });
});
</script>
<style>
.button {
    background-color:#0F0;
    width:3em;
    height:3em;
    display:table-cell;
    float:left;
    margin:0.5em;
}
#instructions {
    font-family:roboto;
    font-color:#bbbbb;
}
a {
    font-family:roboto;
}
</style>
</head>
<body>
    <div>
        <label id="instructions">Guess the combination and you win!</label>
    </div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
</body>
</html>

Answer 5

正确的CSS是color，而不是font-color。

要更改背景，请使用background-color。

Answer 6

解决方案结果证明是多方面的。

首先，我没有将jQuery包含在项目中。我正在运行一个用jQuery编写的脚本，但没有预先加载，这让Javascript解释器处理jQuery。

为了修改这个问题，在我的jQuery工作的<script>之上，我将其包括在内：

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

现在Javascript引擎可以处理jQuery命令。

接下来，我错误地标记了其中一个CSS属性。在我编写的jQuery脚本中的位置：

$(document).ready(function(){
    $(".button").hover(
        function () {
            $(this).css("background", "#ddd");
        }, 
        function () {
            $(this).css("background", "#ccc");
        }
    );
});

我应该写一下：

$(document).ready(function(){
    $(".button").hover(
        function () {
            $(this).css("background-color", "#ddd");
        }, 
        function () {
            $(this).css("background-color", "#ccc");
        }
    );
});

（我错过了background不是CSS属性，我的意思是background-color）

编写自己的jQuery代码时的注意事项：如果您的<script>标记之前您的实际Web代码，请确保脚本中的代码嵌套在该行内：

$(document).ready(x)

因为没有它，Javascript引擎将对尚不存在的HTML对象执行操作;但是，使用这一行，它将等到所有HTML对象都被加载并可修改。

无法使用jQuery </div>让<div>更改颜色

6 个答案: