CODEWITHSUNDEEP
htmlcss
user8689
user8689

Reputation: 27

css class with span not recognizing hover

I am trying to get a link to be half one color and half another color, then switch upon hover. So: (white)Hello (Blue)Everyone! -> (Blue)Hello (White)Everyone!

I think I may have dumbed down the code too much... this is a better example.

How do I get it to where "EVERYONE!" does not have a box around it?

HTML:

<div class="home-logo-text">
<a href="#">
    HELLO
    <span class="home-logo-text-roads">
       EVERYONE!
    </span>
</a>
</div>

CSS:

.home-logo-text a {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #808080;
}
.home-logo-text-roads  {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #6698cb;
}
.home-logo-text.light a {
color: rgba(255,255,255,0.9);
}
.home-logo-text a:hover {
color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
color: #808080;
}

Upvotes: 0

Views: 159

Answers (4)

Juan S&#225;nchez
Juan S&#225;nchez

Reputation: 990

Put the correct order of the HTML elements so CSS styles will be applied:

.home-logo-text a {
    color: #707070;
}
.home-logo-text-roads {
    color: #6698cb;
} 
.home-logo-text a:hover {
    color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
    color: #ffffff;
}

Upvotes: 0

osmanz
osmanz

Reputation: 481

You need this. Use whatever color you want.

.home-logo-text a:hover .home-logo-text-roads {
    color: #707070;
}

Check DEMO here.

Upvotes: 0

Xavier_Ex
Xavier_Ex

Reputation: 8810

Your last CSS rule doesn't look right:

.home-logo-text-roads a:hover {
    color: #ffffff;
}

This CSS says "for an <a> element sitting inside a .home-logo-text-roads element, when it gets hover change its text color to #ffffff. Which is clearly not what you wanted, since you have no <a> element inside your span. If you want to change the span's color on hover event of the <a> which is its parent, switch the selectors around:

a:hover .home-logo-text-roads {
    color: #ffffff;
}

Remember when there's a space between selectors it indicates a fuzzy hierarchy and the rules are applied to the element to the far right.

Upvotes: 0

Jesse Lansner
Jesse Lansner

Reputation: 101

a:hover .home-logo-text-roads {
    color: #ffffff;
}

Upvotes: 1

Related Questions