将菜单文本的背景作为链接

Question

目标：
当鼠标悬停在菜单文本及其背景上时，它应该是包含背景的链接。它发生在菜单上。菜单有两个选项，即主页和练习组。

问题：
我只能将文本作为链接，但不能将背景作为悬停的链接。

如果可能的话，我如何用cure html和css来解决它？

信息：
*您还需要考虑响应设计

堆栈闪电战：
https://stackblitz.com/edit/react-ts-ls5kpn?file=App.tsx

谢谢！

---

App.css

main {
overflow-x: hidden;
}
@media screen and (min-width: 800px) {
main {
margin-left: auto;
margin-right: auto;
max-width: 900px;
text-align: left;
}
}
/*
@media screen and (max-width: 600px) {
main {
margin-left: 10px;
margin-right: 10px;
}
}
*/

---

import * as React from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Home } from './Home';
import { Headers } from './Headers';
import { ExerciseGroup } from './ExerciseGroup';
export default function App() {
return (
<BrowserRouter>
<Headers />
<br />
<main>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/home" element={<Home />} />
<Route path="/exercisegroup" element={<ExerciseGroup />} />
</Routes>
</main>
<footer>
<p>Footer</p>
</footer>
</BrowserRouter>
);
}

---

import React, { useState, Fragment } from 'react';
export const ExerciseGroup = () => {
return (
<>
bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb
bbbbbbbb bbbbbbbb
</>
);
};

---

标题css

nav {
background-color: #3d99ce;
height: 70px;
}
@media screen and (min-width: 601px) {
.container2,
.nav-menu {
padding-left: 0px;
text-align: left;
}
.nav-menu {
margin-top: -50px;
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
ul.nav-menu > li {
display: inline-block;
padding: 0 10px 0 10px;
line-height: 70px;
}
ul.nav-menu > li:hover {
background-color: #2779bf;
}
ul.nav-menu > li > a {
color: white;
text-decoration: none;
}
.menu-button {
display: none;
}
}
@media screen and (max-width: 600px) {
.nav-menu {
/*display: none; */
padding: 0 0 0 0;
list-style: none;
}
.navbar-link {
position: relative;
z-index: 1;
border-top: 1px solid white;
width: 100%;
margin: 0;
top: -16px;
text-align: center;
line-height: 50px;
background-color: grey;
}
.container2 {
display: flex;
flex-direction: row;
align-items: center;
line-height: 70px;
justify-content: space-between;
}
.hidden {
display: none;
}
}

---

Headers.tsx

import React, { useState } from 'react';
import { Link, NavLink } from 'react-router-dom';
import './Header.css';
export const Headers = () => {
const [expandedLinks, setExpandedLinks] = useState(false);
const toggleLinks = () => () => {
setExpandedLinks(!expandedLinks);
};
return (
<nav>
<div className="container">
<span className="container2">
<img
src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png"
width={70}
height={70}
/>
<img
src="https://www.clipartmax.com/png/full/303-3035787_menu-square-alt-comments-mobile-menu-icon-svg.png"
className="menu-button"
style={{ paddingRight: '10px' }}
width={40}
height={40}
onClick={toggleLinks()}
alt=""
/>
</span>
<ul className={expandedLinks ? 'nav-menu' : 'nav-menu hidden'}>
<li className="navbar-link">
<Link to="/home" onClick={toggleLinks()}>
Home
</Link>
</li>
<li className="navbar-link">
<Link to="/exercisegroup" onClick={toggleLinks()}>
exercisegroup
</Link>
</li>
</ul>
</div>
</nav>
);
};

import React, { useState, Fragment } from 'react';
export const Home = () => {
return (
<>
aaaaaaaaa aaaaaaaaaaa aaaaaaaaa aaaaaaaaaaa aaaaaaaaa aaaaaaaaaaa
aaaaaaaaa aaaaaaaaaaa aaaaaaaaa aaaaaaaaaaa
</>
);
};

---

Answer 1

将display:block;添加到链接的css样式中，这应该会修复它。

ul.nav-menu > li > a {
color: white;
text-decoration: none;
display: block; //add this
}