css - current menu item hover not working?

admin管理员组

文章数量:1130349

I am trying to change the text color of my current menu item as on hover its green but the background is green so I want the color to be white on hover but it does not seem to want to work, to view hover over the selected page on 'our products'

website link

li.current-menu-item a:hover{
color:white !important;
}

I am trying to change the text color of my current menu item as on hover its green but the background is green so I want the color to be white on hover but it does not seem to want to work, to view hover over the selected page on 'our products'

website link

li.current-menu-item a:hover{
color:white !important;
}

• css
• html

Share Improve this question asked Oct 30, 2018 at 10:07 Jenova1628Jenova1628 3322 silver badges99 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I just checked your website and found some helpful CSS for your site.
Find this line of CSS and change your color code, it will surely work.

For menu hover and focus ('Use this CSS in bedcentregrimsby.css')

 .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
        color: #a4cb9a;
    }

Please feel free to quote. Thanks, Cheers..!!

In general it's not a good practice to style with !important attribute in CSS. You should try to avoid it.

You will need to find with your browser inspector which CSS rules exist to color your link on hover.

You can find information about how CSS rules overwrite them selves and what rule get's specified in the end: https://developer.mozilla/en-US/docs/Web/CSS/Specificity

E.g.: You already have a hover state style for the link which could override your white color style:

.navbar-nav a:hover, .dropdown-menu>li>a:hover {
    color: #a4cb9a !important;
}

in http://beta2018.bedcentregrimsby.co.uk/wp-content/themes/BedCentre2/css/bedcentregrimsby.css?ver=4.9.8 at line 1006

I am trying to change the text color of my current menu item as on hover its green but the background is green so I want the color to be white on hover but it does not seem to want to work, to view hover over the selected page on 'our products'

website link

li.current-menu-item a:hover{
color:white !important;
}

I am trying to change the text color of my current menu item as on hover its green but the background is green so I want the color to be white on hover but it does not seem to want to work, to view hover over the selected page on 'our products'

website link

li.current-menu-item a:hover{
color:white !important;
}

• css
• html

Share Improve this question asked Oct 30, 2018 at 10:07 Jenova1628Jenova1628 3322 silver badges99 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I just checked your website and found some helpful CSS for your site.
Find this line of CSS and change your color code, it will surely work.

For menu hover and focus ('Use this CSS in bedcentregrimsby.css')

 .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
        color: #a4cb9a;
    }

Please feel free to quote. Thanks, Cheers..!!

In general it's not a good practice to style with !important attribute in CSS. You should try to avoid it.

You will need to find with your browser inspector which CSS rules exist to color your link on hover.

You can find information about how CSS rules overwrite them selves and what rule get's specified in the end: https://developer.mozilla/en-US/docs/Web/CSS/Specificity

E.g.: You already have a hover state style for the link which could override your white color style:

.navbar-nav a:hover, .dropdown-menu>li>a:hover {
    color: #a4cb9a !important;
}

in http://beta2018.bedcentregrimsby.co.uk/wp-content/themes/BedCentre2/css/bedcentregrimsby.css?ver=4.9.8 at line 1006

本文标签： csscurrent menu item hover not working