Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Brian webb
Brian webb
3,769 Points
Posted by Brian webb
Brian webb
3,769 Points

Flexbox button's text color not changing on hover....

Ok so here is my issue, I want to have a list on in sidebar that links to pages in the site, The text in these buttons should be changing color with the button color on hover. The background-color changes just fine but all I can get for the text is if I target the links and when I do that the text color will change , but only when directly hoved over, not when the button its self is hoved over. Not ideal. Here is my code also what is odd, is I know this should work but in order to color the text in the button I had to target the link text, when I added color: yellow; for example under the .lbutton class the text wouldnt change color, I had to target .lbutton a in order to change the color... Now is this because everything is a flexbox? or am I just doing something wrong. and the codepen if you wanna check it out http://codepen.io/olympiaguy/pen/JGdbwP

CSS

.flexlist {
  display: inline-flex;
  flex-direction: column;
list-style:none;
}
.lbutton a {
  color: white;
  text-decoration:none;  
}
.lbutton {
  border-radius:4px; 
  background-color: #4EB1BA;
  padding: 10px;
  margin: 7px;
  box-shadow: 0px 1.5px 1px #888888;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  transition: all .2s ease-out;
}


.lbutton:hover {
  color: #E35D34; 
  background-color: #404040;
}

HTML

<ul class="flexlist">
  <li class="lbutton"><a href="/study-hall/">Study Hall</a></li>
  <li class="lbutton"><a href="/tag/coil-builds/">Coil Building</a></li>
  <li class="lbutton"><a href="/tag/new-vapers/">Vaping info</a></li>
  <li class="lbutton"><a href="/tag/cloud-chasing/">Clouds</a></li>
  <li class="lbutton"><a href="/e-juice-101/">E-juice 101</a></li>
</ul>

6 Answers

Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

Hi Brian,

What you can do is make the a link change color when hovering over the li tag.

How you accomplish this is by using a great css feature called a direct descendant combinator. ">"

.lbutton:hover { 
  background-color: #404040;
}

.lbutton:hover > a {
color: #E35D34;
}

This means whenever you hover on the li tag it will select the a tag and change the color.

Learn more here http://www.w3schools.com/css/css_combinators.asp

Hope this helps!

Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

awesome, I knew I had to be missing something. now on for question 2, I must just be in a daze today but again I cant seem to get the button its self to be the link rather than the text in the button, I swear I did this before and when I would hover over the button not just the text in the button the link could be clicked...

Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

If you want the whole button to be the link... you need to wrap your "a" tag around the li.

<ul class="flexlist">
  <a href="/study-hall/"><li class="lbutton">Study Hall</li></a> <!--- Like this -->
</ul>
Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

Garrett you are the winner on that one, I knew I was missing something, thanks again, I didnt know things could be on the out side of the <li

Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

You can wrap a link tag around anything really.

Also since you are using buttons visually, I would use the <button> element.

<ul class="flexlist">
  <a href="/study-hall/"><li><button class="lbutton">Study Hal</button></li></a>
</ul>
Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Try changing your second hover statement so that that anchor is a descendant of any element with a class but not a direct descendant. 

.lbutton:hover a {
color: #E35D34;
}
Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

Nope changing it to that didnt change much, still the link is only clickable when the mouse is directly over the text.

.lbutton:hover {
  background-color: black;

}
.lbutton:hover a {
color: #E35D34;
}
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

It worked for me when I tinkered with your codepen. :)

But I'm guessing you've updated since you posted?

Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

Ya I got it all working, Now I just have to make a few adjustments to make it look the same, but thank you to everyone who put in some time to help a fellow button masher out.

If you are curious about what I did with this you can check out the sidebar on this page. http://olympiavaporworks.com/category/vaping-guides/

Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

Ok ... maybe I was wrong, It looks like the first button is the only one that is fixed.... wtf lol

Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

Post your updated code please :D

Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

here it is and codepen http://codepen.io/olympiaguy/pen/JGdbwP

CSS

.flexlist {
  display: inline-flex;
  flex-direction: column;
list-style:none;
}
.lbutton a {
  color: white;
  text-decoration:none;  
}
.lbutton {
  border-radius:4px; 
  background-color: #4EB1BA;
  padding: 10px;
  margin: 7px;
  box-shadow: 0px 1.5px 1px #888888;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.lbutton:hover {
  background-color: black;

}
.lbutton:hover a {
color: #E35D34;
}
a {
    color: white;
  text-decoration:none;  
}

<div class="flexlist">
 <a href="/study-hall/"><div class="lbutton">Study Hall</div></a>
 <a href="/tag/coil-builds/"><div class="lbutton">Coil Building</a></div>
 <a href="/tag/new-vapers/"><div class="lbutton">Vaping info</a></div>
 <a href="/tag/cloud-chasing/"><div class="lbutton">Clouds</a></div>
 <a href="/e-juice-101/"><div class="lbutton">E-juice 101</a></div>
</div>
Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

hmm well it looks like this was the issue I had the closing div tags on the wrong side on the closing a tag <a href="/study-hall/"><div class="lbutton">Study Hall</div></a> not <a href="/tag/coil-builds/"><div class="lbutton">Coil Building</div></a>

Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

Put the closing a tags outside of the closing div tags.