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

时间:2013-10-15 10:59:39

标签: javascript jquery html css hover

我在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并不重要,但我必须在里面捣乱。

FIDDLE

对不起我的英文

2 个答案:

答案 0 :(得分:1)

您可以按照以下所示进行操作。 (注意:我假设你正在使用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;
}

Demo Fiddle

编辑(根据MLeFevre的评论更新):将css规则修改为#footerblock.block_clicked以取消!important的使用。

答案 1 :(得分:0)

也许这会有所帮助:http://fiddle.jshell.net/8F6xG/5/

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

还在第40行添加了这条css行

footer.hover.andClicked,