<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> <a href="">Datenschutzrichtlinie</a>
<a href="">AGB</a> <a href="">Nutzungsbedingungen</a>
<a href="">Partner</a>
</center>
</footer>
<span onClick="block()" id="footerblock"></span>
我猜我的css并不重要,但我必须在里面捣乱。
对不起我的英文
答案 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;
}
编辑(根据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,