Trying to get hover effect to effect an a & a ul
Question
I am new to html and css.
I am trying to add a hover effect to a small nav bar at the bottom of my page. The text has a border around it with text inside, and i want the hover effect to invert the design so the colour of the border becomes the background of the button and the text is the page background colour.
Because these are links to my other pages, i had to add css to the "li a" but now my hover effect wont effect the text until you hover over it.
Here is what i have:
nav{ position: fixed; bottom: 0%; left: 0%; right: 00%; display: block; text-align: center; } ul{ padding: 0px; display: inline-block; } li { font-family: Open Sans, sans-serif; font-size: 10px; font-weight: 100; line-height: 25px; text-align: center; width: 100px; border: solid #383838; border-width: 1px; color: #383838; list-style-type: none; float: left; margin: 5px; } li a{ color: #7f7f7f; text-decoration: none; } li:hover{ background: #7f7f7f; color: #000000; } li a:hover{ background: #7f7f7f; color: #000000;
<body> <nav> <ul> <li><a href="#">BLACK & GOLD</a></li> <li><a href="#">BLACK & WHITE</a></li> <li><a href="#">WHITE & GOLD</a></li> <li><a href="#">WHITE & BLACK</a></li> </ul> </nav> </body>
Can anyone let me know what i need to do to fix this.
Thanks Tim
1 answers
solution1
0 ACCPTED 2018-04-21 12:04:30
Change the hover selector from your <a> to your <li> . This way, due to the cascading nature of CSS, your link will be styled differently if it's parent list item is hovered.
nav { position: fixed; bottom: 0%; left: 0%; right: 00%; display: block; text-align: center; } ul { padding: 0px; display: inline-block; } li { font-family: Open Sans, sans-serif; font-size: 10px; font-weight: 100; line-height: 25px; text-align: center; width: 100px; border: solid #383838; border-width: 1px; color: #383838; list-style-type: none; float: left; margin: 5px; } li a { color: #7f7f7f; text-decoration: none; } li:hover { background: #7f7f7f; color: #000000; } li:hover a { background: #7f7f7f; color: #000000; }
<body> <nav> <ul> <li><a href="#">BLACK & GOLD</a></li> <li><a href="#">BLACK & WHITE</a></li> <li><a href="#">WHITE & GOLD</a></li> <li><a href="#">WHITE & BLACK</a></li> </ul> </nav> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.