色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

懸停在導航欄項目上不起作用，當我們懸停在文本旁邊時光標變成手形，而當我們懸停在文本上時光標不是手形

CSS
傅智翔2年前8瀏覽0評論

懸停效果在我的代碼中不起作用。有人能幫忙嗎？當我運行這段代碼時，navbar出現了，但是不可點擊，而它左邊的空白區域是可點擊的，我的css懸停效果也沒有對它起作用。

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
    list-style: none;
    text-decoration: none;
}

:root {
    /* global variables */
    --main-color: #ff702a;
    --text-color: #fff;
    --background-color: #1e1c2a;
    --big-font: 5rem;
    --h2-font: 2.25rem;
    --p-font: 0.9rem;
}

*::selection {
    background: var(--main-color);
    color: #fff;
}

body {
    color: var(--text-color);
    background: var(--background-color);
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /*z-index defines stack order of element*/
    display: flex;
    align-items: center;
    /*controls space around cross axis*/
    justify-content: space-between;
    /*controls space around main axis*/
    padding: 30px 170px;
    background: var(--background-color);
}

.logo {
    color: var(--main-color);
    font-weight: 600;
    font-size: 2.4rem;
}

.navbar {
    display: flex;
}

.navbar li a {
    color: var(--text-color);
    font-size: 1.1rem;
    padding: 10px 20px;
    font-weight: 500;
}

.navbar li a:hover {
    color: var(--main-color);
    transition: .4s;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Website for Foodies!</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <link rel="stylesheet" >
    <link rel="preconnect" >
    <link rel="preconnect"  crossorigin>
    <link
        
        rel="stylesheet">
</head>

<body>
    <header>
        <a href="#" class="logo">Foods</a>
        <div class="bx bx-menu" id="menu-icon"></div>
        <!--class=" bx bx-menu" is responsible for icon from boxicon-->
        <ul class="navbar">
            <li><a href="#Home"></a>Home</li>
            <li><a href="#About"></a>About</li>
            <li><a href="#Menu"></a>Menu</li>
            <li><a href="#Service"></a>Service</li>
            <li><a href="#Contact"></a>Contact</li>
        </ul>
    </header>
</body>
</html>

根據你的準則:

.navbar li a:hover {
    color: var(--main-color);
    transition: .4s;
}

您試圖給錨定標簽的懸停效果作為類navbar & gt李& gta.

現在看看你的html代碼:

<ul class="navbar">
            <li><a href="#Home"></a>Home</li>
            <li><a href="#About"></a>About</li>
            <li><a href="#Menu"></a>Menu</li>
            <li><a href="#Service"></a>Service</li>
            <li><a href="#Contact"></a>Contact</li>
        </ul>

<a href="#Home"></a>

錨標記內沒有可顯示的內容。希望你明白這個問題。將所有關于菜單服務聯系人的菜單文本放在錨定標簽內。像這樣:

<a href="#Home">Home</a>