0

我在使用 JS 时遇到问题，我自己无法解决问题。我希望如果我单击#footerblock，#footerblock 的背景会发生变化，然后该页脚就会失去他的“悬停效果”。

<script>
/* i want that footer does still there but di want that footer has no a hover effect*/

</script>
<footer class="hover">
   <center>
      <table id="footer"></table>
      <a href="">Entwickler</a>&nbsp; &nbsp;<a href="">Datenschutzrichtlinie</a>
      <a href="">AGB</a>&nbsp; &nbsp;<a href="">Nutzungsbedingungen</a>&nbsp; &nbsp;
      <a href="">Partner</a>
   </center>
</footer>
<span onClick="block()" id="footerblock"></span>

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

小提琴

我很抱歉我的英语

4

2 回答 2

0

maybe this helps: http://fiddle.jshell.net/8F6xG/5/

$(document).ready(function(){
    $('#footerblock').on('click',function(){
        $('footer.hover').toggleClass('andClicked');
    });
});

also added this css line on line 40 

footer.hover.andClicked,
于 2013-10-15T11:25:42.733 回答
0

您可以如下所示进行。（注意：我假设您使用的是 jQuery，因为它被标记为有问题）。

基本上我们所做的是，每当#footerblock单击 时，我们向页脚添加/删除一个新类并hover从中删除现有类。我们这样做是因为您的:hover效果是用 CSS 编码的，.hover:hover因此删除hover该类将确保:hover不会应用该样式。

此外，我们还将一个block_clicked类切换到#footerblock以更改其background-color.

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.
    });
});

CSS：

.clicked{
    background-color: blue;
}

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

演示小提琴

编辑（根据 MLeFevre 的评论更新）：修改 css 规则以#footerblock.block_clicked取消使用!important.

于 2013-10-15T11:18:57.907 回答