更改背景並通過onclick阻止懸停

Question

我在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並不重要，但是我必須在里面擺弄一些東西。

小提琴

我的英語不好意思

Answer 1

您可以如下所示進行操作。 （注意：我假設您正在使用jQuery，因為它已被標記）。

基本上，我們要做的就是每當單擊#footerblock ，我們就會在頁腳中添加/刪除新類，並從中刪除現有的hover類。 我們這樣做是因為您的:hover效果是像.hover:hover這樣的CSS編碼的，因此刪除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的使用。

Answer 2

也許這會有所幫助： http : //fiddle.jshell.net/8F6xG/5/

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

還在第40行上添加了此CSS行

footer.hover.andClicked,