Javascript 通过onclick更改背景并阻止悬停

我有JS的问题，我自己解决不了这个问题。 我希望，如果我点击#footerblock，#footerblock的背景会发生变化，然后该页脚会失去“悬停效果”

/*我希望页脚仍然存在，但我希望页脚没有悬停效果*/

我想我的css并不重要，但我必须在里面摆弄

---

我为我的英语感到抱歉

您可以按如下所示操作。（注意：我假设您使用的是jQuery，因为它有标记）

基本上，我们所做的是，每当单击

#footerblock

时，我们都会向页脚添加/删除一个新类，并从中删除现有的

悬停类。我们这样做是因为您的
：hover
效果是用CSS编码的，就像
。hover:hover
一样，因此删除
hover
类将确保不会应用
：hover
样式

此外，我们还将单击的
块
类切换到
页脚块
，以更改其
背景色

jQuery:

$(document).ready(function () {
    $('#footerblock').on('click', function() {
        $('footer').toggleClass('clicked'); //toggling a new class on click to change background
        $('footer').toggleClass('hover'); //toggling the hover class because your `:hover` pseudo is attached to it.
        $(this).toggleClass('block_clicked'); //to add a custom style to the block when clicked.
    });
});

.clicked{
    background-color: blue;
}

#footerblock.block_clicked{
    background-color: red;
}

CSS:

$(document).ready(function () {
    $('#footerblock').on('click', function() {
        $('footer').toggleClass('clicked'); //toggling a new class on click to change background
        $('footer').toggleClass('hover'); //toggling the hover class because your `:hover` pseudo is attached to it.
        $(this).toggleClass('block_clicked'); //to add a custom style to the block when clicked.
    });
});

.clicked{
    background-color: blue;
}

#footerblock.block_clicked{
    background-color: red;
}


编辑（根据MLeFevre的评论更新）：将css规则修改为
#footerblock。block_单击
以取消
的使用！重要信息
这可能有助于：

也在第40行添加了这个css行

footer.hover.andClicked,

背景更改意味着只更改背景颜色，而不更改悬停效果或背景图像之类的位置。单击块时，背景变为蓝色，不会出现悬停效果。第二次单击时，它将返回到原始状态。关闭，但我希望#footerblock的背景发生更改您可以执行类似于
#footerblock.block的操作，而不是使用important@MLeFevre对该评论+1。是的，那会好得多。将在一分钟内更改：）@Harry脚本必须在JS中。您可以更改您的代码，以便我的编辑器可以正确阅读它。我的bowser说美元不是defined@DOCTYPEHTML：此脚本之前是否包含jQuery库？@DOCTYPEHTML:Check。写得有点匆忙，所以可能不是优化版本。