Remove underline on hover for jquery accordion
Is it possible to remove the underline (text-decoration:none) for the jquery ui accordion?
I tried many different solutions, but none seem to work. Maybe I am not selecting the proper style id.
For example...
$('#accordion .ui-state-hover').attr('style', 'text-decoration:none');
$('#accordion .ui-state-focus').attr('style', 'text-decoration:none');
$('#accordion .ui-state-hover').css('text-decoration', 'none');
EDIT: I understand that I can just change the CSS stylesheet, but I only want to do this for ONE of the many accordions.
EDIT2: Here is the actual code...
<style type="text/css">
.myAccordion.ui-state-hover, .myAccordion.ui-state-focus {text-decoration:none !important;}
</style>
<!--Downtime Announcement begin-->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#accordion").accordion({
collapsible: true,
active: false
});
$('#accordion .ui-icon').attr('style', 'display: none');
$('#accordion .ui-accordion-header').attr('st开发者_高级运维yle', 'background:#A4000F');
$('#accordion .ui-accordion-header a').attr('style', 'font-weight:bold;font-size:13px;color:white');
$('#accordion .ui-accordion-content').attr('style', 'background:#A4000F;width:auto');
$('#accordion .ui-accordion-content p').attr('style', 'font: 14px/16px Arial,Helvetica,sans-serif;color:white');
$('#accordion .ui-state-hover').addClass('myAccordion');
$('#accordion .ui-state-focus').addClass('myAccordion');
});
</script>
<div id="accordion" >
<h3><a href="#">Important Announcement</a></h3>
<div>
<p>Beginning at 6pm EDT on April 1st, 2011 our websites will be down for a system upgrade. Please return later in the weekend when the site will return to full availability.</p>
</div>
</div>
<!--Downtime Announcement end-->
You need to modify the stylesheet that comes with jQuery UI.
Try:
$('#accordion .ui-state-hover').css('text-decoration','none');
Edit after few comments:
When you don't want to modify all accordions, then just create new css class ie. "myAccordion", then use jquery to addClass to those two selectors.
$('#accordion .ui-state-hover').addClass('myAccordion');
$('#accordion .ui-state-focus').addClass('myAccordion');
And modify stylesheet like:
.myAccordion.ui-state-hover, .myAccordion.ui-state-focus {text-decoration:none;}
If this rule isn't strong enugh, then modify:
.myAccordion.ui-state-hover, .myAccordion.ui-state-focus {text-decoration:none !important;}
From the looks of it, it seems the underline is on the anchor element. So, just use this as CSS:
#accordion .ui-accordion-header a {
text-decoration: none;
}
or via script as:
$('#accordion .ui-accordion-header a').css('text-decoration','none');
I set this up on jsFiddle for a quick demo: http://jsfiddle.net/93hw2. I'm sure this will come in handy in the future.
did u try this:
$('#accordion .ui-state-hover').css('text-decoration', 'none');
$('#accordion .ui-state-focus').css('text-decoration', 'none');
remember to do that AFTER the load of the accordion
精彩评论