My css-classes ain't kicking through, using JQuery toggleClass
Ok, so I basicly have this list. What I'm trying to do is just highlighting items in the list with toggleClass.
<div class="listbox">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</div>
<script type="text/javascript">
$('#container .listbox li').click(function() {
$(this).toggleClass('highlight');
});
</script>
CSS:
div.listbox ul li{
background: #eee;
padding: 15px 20px;
border-bottom: 1px solid #999;
border-top: 1px solid #fff;}
HEAD:
<style type="text/css">
.highlight{
background: #aaa;
padding: 20px 15px;
border-bottom: 1px solid #fff;
border-top: 1px solid #999;}
</style>
The problem is that if I've specified a css property in the .css-doc, I can't modify that value with the new class.
I've tried placing it above and below the styleattributes and, as below, in the head-region.
When clicking, the js adds the class and all, but any predefined values wont开发者_JAVA百科 change.
Try increasing the class specificity for something like:
div.listbox ul li.highlight {
精彩评论