Style won't apply

[Spunky]

OK this is probably going to be something really simple, like a brain ###### or a typo, but I cannot figure this out for the life of me.. so here it goes.

 

First, here's my HTML:

<accordion>    <accordion-group ng-repeat="z in epLinks" is-open="z.accO" is-disabled="z.accEn">        <accordion-heading><span class="disabledLink accHead">{{z.name}}<span class="caret"></span></span></accordion-heading>            content                          </accordion-group></accordion>

Just take a look at the

<span class="disabledLink..."

part of that located in the accordion-heading.

 

Here is my CSS now:

    .disabledLink{        color:#898989;        cursor:default;    }    .disabledLink:hover{        text-decoration:none !important;    }

The style for .disabledLink are being applied just fine... why is the style for .disabledLink:hover not being applied?? I'd even added !important to it thinking something was overriding it.

[dsonesuk]

So you are saying you have a underline applied to these span elements somewhere right! and you want this underline to disappear

[Spunky]

Perhaps it is added somewhere, perhaps in the Bootstrap external links as a default for accordions. I can't find where it is applied when I inspect element. I just don't understand why I can change the style of it but not the style on hover.

[dsonesuk]

Usually you will find it is not the element you select but a parent, and are you sure it is a underline? It could be border, background color showing fron overlapping elements where inner element has bottom margin showing background of outer, that gives effect of a border, i have had this before.

[Spunky]

You're right, ended up being in a parent-element not visible in my code, but visible in inspect element:

  a.accordion-toggle:hover{    text-decoration: none;  }

Did the trick finally.