CODEWITHSUNDEEP
htmlcsshover
user11508332
user11508332

Reputation: 667

removing css hover effect of one link while keeping same hover effect for other links

I have the following code in HTML:

        <div id="side">
            <ul class="sideCol sideCol-fixed">
                <li>
                    <div class="user-view" style="background-color: #141E30;">
                        <a href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>
                    </div>
                </li>
                <div class="steps">
                    <li><a href="/link1">Link 1</a></li>
                    <li><a href="/link2">Link 2</a></li>
                    <li><a href="/link3">Link 3</a></li>
                </div>
            </ul>
        </div>

and the following code in CSS:

#side li a:hover{
  color: black;
}

I only recently added in the line <a href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a> and previously I had set the css so that when the cursor hovers over Link 1, Link 2 and Link 3, the text turns black, where previously the text is white.

The text for the "LINK TO EXTERNAL PAGE" anchor tag is also initally white, but unlike the other links I do not want it to turn black when I hover on it. I have tried adding an id to the anchor tag (<a id="newid" href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>), and then adding css to that id in the stylesheet (code at bottom of question) to make it so that the text turns white when hovered over (thus aiming to make it not turn black) but this does not work and the text still turns black. Would anyone know how to achieve this?

#newid:hover{
  color: white;
}

Upvotes: 0

Views: 645

Answers (3)

jaspre
jaspre

Reputation: 51

Selector that you tried to apply has lower css specificity.

Solution: Use selector with higher specificity to override this style.

For example you can use:

.user-view > #newid:hover {
   color: white;
}

or

#side #newid:hover {
  color: white;
}

or

#side li .user-view a:hover {
  color: white;
}

Here: https://specificity.keegan.st/ you can calculate your selector specificity.

#side li a:hover{
  color: black;
}

Has specificity 1.1.2 where,

#newid:hover{
  color: white;
}

Has specificity 1.1.0 so this style in other words, was less important and thus not applied.

Here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity you can read more about it.

Upvotes: 1

wanjaswilly
wanjaswilly

Reputation: 325

use this to select you list item

<div id="side">
        <ul class="sideCol sideCol-fixed">
            <li>
                <div class="user-view" style="background-color: #141E30;">
                    <a href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>
                </div>
            </li>
            <div class="steps">
                <li><a href="/link1">Link 1</a></li>
                <li><a href="/link2">Link 2</a></li>
                <li><a href="/link3">Link 3</a></li>
            </div>
        </ul>
    </div>

css:

.steps :hover { 
     /* your css code here */
     color:black;
  }

Upvotes: 0

redeyes
redeyes

Reputation: 61

Did you tried to add a css class instead?

<div id="side">
    <ul class="sideCol sideCol-fixed">
        <li>
            <div class="user-view" style="background-color: #141E30;">
                <a class="externallink" href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>
            </div>
        </li>
        <div class="steps">
            <li><a href="/link1">Link 1</a></li>
            <li><a href="/link2">Link 2</a></li>
            <li><a href="/link3">Link 3</a></li>
        </div>
    </ul>
</div>

CSS

.externallink:hover{
  color: white;
}

Upvotes: 0

Related Questions