We can easily change the color of the .cursor
element depending on which element the mouse is hovering. We'll also observe how the colors will change gradually, thanks to our
transition: all 1s
property, thus creating a really nice effect.
Let's add some properties to application.css
to change the color of the .cursor
element, and to add some colors to the second-level menus:
/* portfolio */ li[data-section=portfolio]:hover ~ li.cursor { background-color: #468DBD; } nav > ul > li[data-section=portfolio] > ul{ background-color: rgb(70, 141, 189); background-color: rgba(60, 194, 204, 0.8); background-image: linear-gradient(left, rgba(70, 141, 189,1), rgba(70, 141, 189, 0.0)); } nav > ul > li[data-section=portfolio] > ul > li.cursor{ background-color: rgb(60, 194, 204); background-color: rgba(60, 194, 204, 0.7); } /* interests */ li[data-section=interests]:hover ~ li.cursor { background-color: #9E5CD0; } nav > ul > li[data-section=interests...