javascript - 无法让 <div> 使用 jQuery 改变颜色

标签 javascript jquery css html

所以,我有一个我正在开发的小网站——它非常简单,我只是用它最终玩弄 C++ 和 Javascript COM 接口(interface)和按位运算符。

但我被简单的事情困住了。

这里分别是我的 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是我所拥有的一个 jsfiddle,将鼠标悬停在框上应该会导致它们改变颜色。我无法让这个例子工作。这很简单,但我似乎无法说出我做了什么。

稍后我会有更高级的功能,但现在我已经厌倦了自己盯着这个看。

{StackOverflow Member},你有什么想法吗?

最佳答案

为此使用 css

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

关于javascript - 无法让 <div> 使用 jQuery 改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20407206/

相关文章:

html - 如何使用 CSS 更改文本?

javascript - 使用 qrcode.js OnClick 生成随机 QR 码

javascript - 有没有办法用 JavaScript 修改 CSS 背景颜色的不透明度值?

javascript - 将 Nuxt 应用程序部署到域上的子目录

javascript - RequireJs:错误的模块顺序

javascript - 有没有什么方法可以不使用 tweetbox 直接点击一个按钮来发推文?

javascript - 使用 JavaScript 替换一个字符上的多个实例

jquery - Bootstrap Form Helpers 国家和州不显示

javascript - 如何链接网站中的两个视频以使用 javascript 在悬停时同时播放?

css - 创建新的列类 xlarge