Change Background and block hover by onclick

Question

I have trouble with JS, I can not solve the problem myself that. I want that if I click on #footerblock that the background of #footerblock changes and then that footer loses his "hover effect".

<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>

I guess my css is not important, but I have to fiddle packed inside.

I´m sorry for my English

Answer 1

You can do it as shown below. (Note: I am assuming you are using jQuery as it is tagged in question).

Basically what we are doing is that whenever the #footerblock is clicked, we add/remove a new class to the footer and remove the existing hover class from it. We do this because your :hover effect is coded in CSS like .hover:hover so removing the hover class will make sure that the :hover style will not be applied.

In addition we are also toggling a block_clicked class to the #footerblock to change its 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;
}

Demo Fiddle

EDIT (Updated based on MLeFevre's comment): Modified the css rule to #footerblock.block_clicked to do away with the usage of !important .

Answer 2

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,