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

Richard Targett
Richard Targett
4,960 Points
Posted by Richard Targett
Richard Targett
4,960 Points

Where is the track that talks about styling nav bars, and activating [hover] [linked] and [clicked] items

I want to add a 10 item UL list to my site. I got it. But I also want them to highlight when moused over, and then keep a certain color once clicked.

I have alot of tracks already completed and I believe among them is the answer. I just forget where that is.

Maybe point me to the lessons that talk about this, answer it yourself, or point me into where and what to search on google or W3schools.

Thanks. :-)

2 Answers

Richard Targett
Richard Targett
4,960 Points
Richard Targett
Richard Targett
4,960 Points

http://i.imgur.com/aGrTUwa.png - this for example.

Here's the code. 

ul#dream-list-front {
position: relative;
left: -35px;    
}
ul#dream-list-front li {
background:  #421162;
color: #fff;
list-style-type: none;
border-radius: 1px;
margin-top: 5px;
border-bottom: 3px ridge black;
padding: 10px;
width: 450px; 
text-align: left;
font-weight: bold;
font-family: 'Roboto', sans-serif;
list-style: square inside url("sqpurple.gif");

}


ul#dream-list-front li:nth-child(even) {
background-color:  #421162;
color:  #52bab3;

}

ul#dream-list-front li:nth-child(1) {
background-color:  #fff;
color:  #52bab3;
text-align: center;

}

Where do I start from to edit and style the list to highlight when moused over, stay active once clicked, and all that jazz.

Is there a track i havent reached yet? I went and searched through the completed ones I did. Don't remember where it taught this.

Any help is appeciated, thanks

Erik Cruz
Erik Cruz
9,772 Points
Erik Cruz
Erik Cruz
9,772 Points

I'll give you an example I made on JSfiddle, here is the link for it https://jsfiddle.net/xbhv67hq/2/

It has the ul list items and some css for styling them. but in order the be able to click on one of the list items and change the color of it, so it shows it's selected I used some Jquery with only 3 simple lines. You'll learn Jquery in a later course. If you have any questions or if there is anyone else reading this with a different solution, please share.