css - 为什么 css hover 只影响书签？

Question

我在网站上有 5 个链接，它们是用 css 设计的，鼠标悬停在它们上面后它们应该变黑。到外部页面的链接不会变黑，只有页面上书签的链接变黑。

我尝试了不同的样式，但没有任何效果。它在没有 React 和服务器的情况下正常工作。

CSS 样式:

.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;
}

菜单链接类:

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;

菜单类:

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;

没有错误，但是当我在 chrome 开发者工具中强制悬停在链接上时，我得到了这个:

颜色:黑色；

Answer 1

您正在用这些覆盖 .menu_link 悬停样式

.menu_link:visited, .menu_link:link {
    color: darkgreen; /*this will override .menu_link:hover styles*/
}

如果 css 特异性完全相同，则顺序很重要。稍后声明的样式将被应用。

因此将您的 css 更改为以下内容:

.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;
}