Home > front end >  White text in menu
White text in menu

Time：02-05

I have a problem with this css. I would like when I hover the mouse over an item the text color turns blue and the background stays white. I would also like the menu text to be white. What happens is that when I hover with the mouse, since the .menu li:hover item must have a white background, even the text, if I put

a {
    color: white;
}

it stays white. How can I solve this?

.menu{
  list-style-type: none;

  width: 200px;
  background: linear-gradient(to bottom,  #1D72B9, #35A8E0);
  padding: 30px 0 30px 30px;
}

.menu li{
  position: relative;
  padding: 5px;
  border-radius: 10px 0 0 10px;
}



.menu li:hover{
  background: white;
}


a:focus,a:hover{
    outline:0;
    color: #1D72B9;
    text-decoration:none
}

.menu li:hover:after,
.menu li:hover:before{
  content:'';
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  color:white;
}

.menu li:hover:after{
  top: -10px;
  background: radial-gradient(circle at top left,  10px, white 11px);
}

.menu li:hover:before{
  bottom: -10px;
  background: radial-gradient(circle at bottom left, 10px, white 11px);
}


a {

    color: white;

}



li,ul{
    padding:0;
    margin:0
}
<ul >
  <li><a href="<%= restaurants_restaurant_profile_path %>"><i  aria-hidden="true"></i><span > Profile</span></a></li>
  <li ><a href="<%= restaurants_reservation_book_path %>"><i  aria-hidden="true"></i><span > Reservation Book</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Statistics</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > CRM</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Settings</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Support</span></a></li>

</ul>

CodePudding user response：

This is what you want.

li:hover a{
color: blue;
}

CodePudding user response：

You're only changing the link colour when you hover over the link itself, but you're changing the background colour when you hover over the <li>.

Since the link is not a block element, it doesn't expand to fill the available space, so if you hover over the <li> to the right of the link, you're not hovering over the link.

Change the <a> to display:block; and color:inherit;. Move the padding from the <li> to the <a>. And set the colour on the li:hover instead of a:hover.

.menu {
  list-style-type: none;
  width: 200px;
  background: linear-gradient(to bottom, #1D72B9, #35A8E0);
  color: white;
  padding: 30px 0 30px 30px;
}

.menu li {
  position: relative;
  border-radius: 10px 0 0 10px;
}

.menu li:hover {
  background: white;
  color: #1D72B9;
}
.menu a {
  display: block;
  color: inherit;
  padding: 5px;
}

.menu a:focus {
  outline: 0;
  text-decoration: none
}

.menu li:hover:after,
.menu li:hover:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  color: white;
}

.menu li:hover:after {
  top: -10px;
  background: radial-gradient(circle at top left, 10px, white 11px);
}

.menu li:hover:before {
  bottom: -10px;
  background: radial-gradient(circle at bottom left, 10px, white 11px);
}

a {
  color: white;
}

li,
ul {
  padding: 0;
  margin: 0
}
<ul >
  <li><a href="<%= restaurants_restaurant_profile_path %>"><i  aria-hidden="true"></i><span > Profile</span></a></li>
  <li ><a href="<%= restaurants_reservation_book_path %>"><i  aria-hidden="true"></i><span > Reservation Book</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Statistics</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > CRM</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Settings</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Support</span></a></li>

</ul>

CodePudding user response：

You don't need to declare style for hovered links separetely (a:hover), you can just add css for links, which inside of hovered parent element like this:

.menu li:hover a {
    outline:0;
    color: #1D72B9;
    text-decoration:none;
}

It means style will be applies to links wrapped into "li" wrapper into element with "menu" class when "li" is hovered.

Your solution:

.menu{
  list-style-type: none;

  width: 200px;
  background: linear-gradient(to bottom,  #1D72B9, #35A8E0);
  padding: 30px 0 30px 30px;
}

.menu li{
  position: relative;
  padding: 5px;
  border-radius: 10px 0 0 10px;
}



.menu li:hover{
  background: white;
}

.menu li:hover a {
  outline:0;
  color: #1D72B9;
  text-decoration:none;
}

.menu li:hover:after,
.menu li:hover:before{
  content:'';
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  color:white;
}

.menu li:hover:after{
  top: -10px;
  background: radial-gradient(circle at top left,  10px, white 11px);
}

.menu li:hover:before{
  bottom: -10px;
  background: radial-gradient(circle at bottom left, 10px, white 11px);
}


a {

    color: white;

}



li,ul{
    padding:0;
    margin:0
}
<ul >
  <li><a href="<%= restaurants_restaurant_profile_path %>"><i  aria-hidden="true"></i><span > Profile</span></a></li>
  <li ><a href="<%= restaurants_reservation_book_path %>"><i  aria-hidden="true"></i><span > Reservation Book</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Statistics</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > CRM</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Settings</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Support</span></a></li>

</ul>

CodePudding user response：

You should make your <a> full width and height of the li.

If you give the <a> an display block it will work. also add the padding in the <a>then instead of the <li>.

OR

Make the hover on the li instead the a

.menu li:hover a { 
   color: yourColor;
}

CodePudding user response：

.menu {
  list-style-type: none;
  width: 200px;
  background: linear-gradient(to bottom, #1D72B9, #35A8E0);
  padding: 30px 0 30px 30px;
}

.menu li {
  position: relative;
  padding: 5px;
  border-radius: 10px 0 0 10px;
}

.menu li:hover {
  background: white;
}

.menu li:hover > a {/*use of child operator*/
  outline: 0;
  color: #1D72B9;
  text-decoration: none
}

a:focus,
a:hover {
  outline: 0;
  color: #1D72B9;
  text-decoration: none
}

.menu li:hover:after,
.menu li:hover:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  color: white;
}

.menu li:hover:after {
  top: -10px;
  background: radial-gradient(circle at top left, 10px, white 11px);
}

.menu li:hover:before {
  bottom: -10px;
  background: radial-gradient(circle at bottom left, 10px, white 11px);
}

a {
  color: white;
}

li,
ul {
  padding: 0;
  margin: 0
}
<ul >
  <li><a href="<%= restaurants_restaurant_profile_path %>"><i  aria-hidden="true"></i><span > Profile</span></a></li>
  <li ><a href="<%= restaurants_reservation_book_path %>"><i  aria-hidden="true"></i><span > Reservation Book</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Statistics</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > CRM</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Settings</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Support</span></a></li>

</ul>

simply use > operator

get reference here

  • this answer maintains your style including display:none and no additional steps required

CodePudding user response：

Does this give you the result wanted?

.menu {
  list-style-type: none;
  width: 200px;
  background: linear-gradient(to bottom, #1D72B9, #35A8E0);
  padding: 30px 0 30px 30px;
}

.menu li {
  position: relative;
  padding: 5px;
  border-radius: 10px 0 0 10px;
}

.menu li:hover {
  background: white;
}

.menu li:focus a,
.menu li:hover a {
  outline: 0;
  color: #1D72B9;
  text-decoration: none
}

.menu li:hover:after,
.menu li:hover:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  color: white;
}

.menu li:hover:after {
  top: -10px;
  background: radial-gradient(circle at top left, 10px, white 11px);
}

.menu li:hover:before {
  bottom: -10px;
  background: radial-gradient(circle at bottom left, 10px, white 11px);
}

a {
  color: white;
}

li,
ul {
  padding: 0;
  margin: 0
}
<ul >
  <li><a href="<%= restaurants_restaurant_profile_path %>"><i  aria-hidden="true"></i><span > Profile</span></a></li>
  <li ><a href="<%= restaurants_reservation_book_path %>"><i  aria-hidden="true"></i><span > Reservation Book</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Statistics</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > CRM</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Settings</span></a></li>
  <li><a href="#"><i  aria-hidden="true"></i><span > Support</span></a></li>

</ul>

Page link：https//www.codepudding.com/frontend/289350.html

Prev:I made a responsive website and included a toggle menu, but it does not function
Next:My Wrapper Background Image does not show
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding