Why css hover is affecting only bookmarks? - css

Question

I have 5 links on site, they are styled with css, and they should turn black after mouse hovers on them. Links to extrenal pages doesn't turn black, only links to bookmarks on page are turning black.
I tried diffrent styling and nothing works. It works normally without React and without the server.
css styling:
.menu_link {
border: none;
text-decoration: none;
color: darkgreen;
height: 100%;
width: 20%;
text-align: center;
font-size: calc(1em + 1vw);
font-family: pokemon-hollow;
}
.menu_link:hover {
color: black;
background-color: beige;
}
.menu_link:visited, .menu_link:link {
color: darkgreen;
}
MenuLink class:
import React from 'react';
import './MenuLink.css'
class MenuLink extends React.Component {
render() {
return (
<a href={this.props.href} target={this.props.target} className="menu_link" >{this.props.name}</a>
)
}
}
export default MenuLink;
Menu class:
import React from 'react';
import './Menu.css';
import '../MenuLink/MenuLink'
import MenuLink from '../MenuLink/MenuLink';
class Menu extends React.Component {
render() {
return (
<div id='menu'>
<MenuLink id="main_container" name="Home"/>
<MenuLink href="https://bulbapedia.bulbagarden.net/wiki/Fennekin_(Pok%C3%A9mon)" name='Fennekin' target='_blank' />
<MenuLink href="https://bulbapedia.bulbagarden.net/wiki/Braixen_(Pok%C3%A9mon)" name='Braixen' target='_blank' />
<MenuLink href="https://bulbapedia.bulbagarden.net/wiki/Delphox_(Pok%C3%A9mon)" name='Delphox' target='_blank' />
<MenuLink id="main_container" name="Galery"/>
</div>
)
}
}
export default Menu;
No errors, but when I force on hover on link in chrome developer tools i get this:
color: black;

Answer 1

You are overriding .menu_link hover styles with these
.menu_link:visited, .menu_link:link {
color: darkgreen; /*this will override .menu_link:hover styles*/
}
If css specificity is exactly the same, order does matter. Styles declared later will be applied.
So change your css to the below:
.menu_link:visited, .menu_link:link,.menu_link {
border: none;
text-decoration: none;
color: darkgreen;
height: 100%;
width: 20%;
text-align: center;
font-size: calc(1em + 1vw);
font-family: pokemon-hollow;
}
.menu_link:hover {
color: black;
background-color: beige;
}

Answer 2

The problem was the order of lines.
.menu_link:visited, .menu_link:link {
color: darkgreen;
}
were after
.menu_link:hover {
color: black;
background-color: beige;
}
and they were overwriting hover selector. Changing the order to:
.menu_link:visited, .menu_link:link {
color: darkgreen;
}
.menu_link:hover {
color: black;
background-color: beige;
}
was what fixed the problem.
Bookmarks links weren't affected, probably because they can't have state :visited or :link.