Fatal编程技术网
  • html/
  • Html 为什么可以'；t我将鼠标悬停在<；a>；<；导航>；？

Html 为什么可以'；t我将鼠标悬停在<；a>；<；导航>；？

html css

Html 为什么可以'；t我将鼠标悬停在<；a>；<；导航>；？,html,css,Html,Css,每当我将鼠标悬停在导航栏中的某个链接上时，a:hover属性似乎不起作用。它似乎可以很好地应用于网站下方的其他链接，但无论出于何种原因，都不能应用于导航栏的顶部 HTML 当我在全屏模式下悬停时，我希望得到一个黑色背景和白色文本。但是，我没有得到任何悬停动作。中的z索引。第一视图将整个div推到堆栈上下文的后面。删除z-index或给它一个更高的值。问题是由您的第一视图中的z-indexdiv导致的，该div正在包装导航栏 如果您从css中删除该属性，那么您将能够按预期将鼠标悬停在导航链接上。如

每当我将鼠标悬停在导航栏中的某个链接上时，a:hover属性似乎不起作用。它似乎可以很好地应用于网站下方的其他链接，但无论出于何种原因，都不能应用于导航栏的顶部

HTML

当我在全屏模式下悬停时，我希望得到一个黑色背景和白色文本。但是，我没有得到任何悬停动作。

中的z索引。第一视图将整个
div
推到堆栈上下文的后面。删除
z-index
或给它一个更高的值。

问题是由您的
第一视图中的
z-index
div导致的，该div正在包装导航栏


如果您从css中删除该属性，那么您将能够按预期将鼠标悬停在导航链接上。
如果您移动
z-index:-1从
开始。第一视图
将产生悬停效果



*{
保证金：0；
填充：0；
}
@导入url（'https://fonts.googleapis.com/css?family=B612+莫诺|建筑师+女儿|双体船|经济舱|轨道船|诺托+塞里夫|桑切斯|诺托+桑斯+香港|拉吉达尼|蒙达|小胡瓜|永久+标记|正义与展示=交换|；
/*第一家庭儿童*/
.姓名{
字体大小：60px；
弹性：1；
文本对齐：居中；
字体系列：“建筑师之女”，“B612单声道”，单空间；
}
.角色{
字体大小：30px；
弹性：1；
文本对齐：居中；
字体系列：“建筑师之女”，“B612单声道”，单空间；
}
/*A链接和列表*/
保险商实验室{
列表样式：无；
显示器：flex；
}
.导航链接{
文字装饰：无；
颜色：黑色；
显示：内联；
弹性：1；
文本对齐：居中；
边框：1pt黑色实心；
填充：3rem；
字母间距：3px；
字体系列：“B612单声道”，单空格；
}
.导航链接：悬停{
背景色：黑色；
颜色：白色；
}
/*身体*/
身体{
显示器：flex；
弯曲方向：立柱；
}
/*观点*/
.第一视图{
背景色：#FFFED6；
高度：100vh；
}
.第二种观点{
背景色：#E8E2B7；
最小高度：30雷姆；
}
.第三种观点{
最小高度：30雷姆；
背景色：#FFFED6；
}
.第四种观点{
最小高度：15雷姆；
背景色：#E8E2B7；
}
/*部分*/
·第一家庭组{
显示器：flex；
弯曲方向：立柱；
利润率：20%0；
}
.第一投资组合部分{
显示器：flex；
}
.第二投资组合组{
显示器：flex；
弯曲方向：行；
}
.第一节{
显示器：flex；
}
·第一联络组{
显示器：flex；
}
/*段落内容*/
.基本的{
弹性：1；
文本对齐：居中；
边缘顶部：12雷姆；
}
.a-basic{
弹性：1；
文本对齐：居中；
边缘顶部：12雷姆；
}
.b-basic{
弹性：1；
文本对齐：居中；
边缘顶部：12雷姆；
}
c-basic{
弹性：1；
文本对齐：居中；
边缘顶部：12雷姆；
}
/*章节标题*/
.投资组合名称{
字号：200；
字体系列：“B612单声道”，单空格；
利润率：5%0%；
}
.关于标题{
字号：200；
字体系列：“B612单声道”，单空格；
利润率：5%0%；
}
.联系方式{
字号：200；
字体系列：“B612单声道”，单空格；
利润率：5%0%；
}



投资组合网站

    


德文郡鲁西内克


Web开发人员

文件夹

废话


废话


cblah诸如此类

关于

诸如此类

接触

诸如此类




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>Portfolio Website</title>
</head>
<body>
    <div class="first-view">
        <nav>
            <ul>
                <a class="nav-links" href="#">HOME</a>
                <a class="nav-links" href="#">PORTFOLIO</a>
                <a class="nav-links" href="#">ABOUT</a>
                <a class="nav-links" href="#">CONTACT</a>
            </ul>
        </nav>
        <div id="home"> 
            <section class="first-home-section">
                <p class="name">Devon Rusinek</p>
                <p class="role">Web Developer</p>
            </section>
        </div>
    </div>



    <div class="second-view">
        <div id="portfolio">
            <section class="first-portfolio-section">
                <h1 class="portfolio-title">portfolio</h1>
            </section>
            <section class="second-portfolio-section">
                <p class="a-basic">ablah blah blah</p>
                <p class="b-basic">bblah blah blah</p>
                <p class="c-basic">cblah blah blah</p>
            </section>
        </div>
    </div>
    <div class="third-view">
        <div id="about">
            <section class="first-about-section">
                <h1 class="about-title">about</h1>
            </section>
            <section class="second-about-section">
                <p class="basic">blah blah blah</p>
            </section>
        </div>
    </div>



    <div class="fourth-view">
        <div id="contact">
            <section class="first-contact-section">
                <h1 class="contact-title">contact</h1>
            </section>
            <section class="second-contact-section">
                <p class="basic">blah blah blah</p>
            </section>
        </div>
    </div>
</div>
</body>
</html>



*{
    margin: 0;
    padding: 0;
}
@import url('https://fonts.googleapis.com/css?family=B612+Mono|Architects+Daughter|Catamaran|Economica|Orbitron|Noto+Serif|Sanchez|Noto+Sans+HK|Rajdhani|Monda|Courgette|Permanent+Marker|Righteous&display=swap');




/*FIRST-HOME-SECTION CHILDREN*/
.name{
    font-size: 60px;
    flex: 1;
    text-align: center;
    font-family: 'Architects Daughter', 'B612 Mono', monospace;
}
.role{
    font-size: 30px;
    flex: 1;
    text-align: center;
    font-family: 'Architects Daughter', 'B612 Mono', monospace;
}



/*A LINKS AND LISTS*/

ul{
    list-style: none;
    display: flex;
}

.nav-links{
    text-decoration: none;
    color: black;
    display: inline;
    flex: 1;
    text-align: center;
    border: 1pt black solid;
    padding: 3rem;
    letter-spacing: 3px;
    font-family: 'B612 Mono', monospace;
   }

.nav-links:hover{
    background-color: black;
    color: white;
}


/*BODY*/

body{
    display: flex;
    flex-direction: column;
}




/*VIEWS*/

.first-view{
    z-index: -1;
    background-color: #FFFED6;
    height: 100vh;
}
.second-view{
    background-color: #E8E2B7;
    min-height: 30rem;
}
.third-view{
    min-height: 30rem;
    background-color: #FFFED6;
}
.fourth-view{
    min-height: 15rem;
    background-color: #E8E2B7;
}




/*SECTIONS*/

.first-home-section{
    display: flex;
    flex-direction: column;
    margin: 20% 0;   
}
.first-portfolio-section{
    display: flex;
}
.second-portfolio-section{
    display: flex;
    flex-direction: row;
}
.first-about-section{
    display: flex;
}
.first-contact-section{
    display: flex;
}





/*PARAGRAPH CONTENT*/

.basic{
    flex: 1;
    text-align: center;
    margin-top: 12rem;
}
.a-basic{
    flex: 1;
    text-align: center;
    margin-top: 12rem;
}
.b-basic{
    flex: 1;
    text-align: center;
    margin-top: 12rem;

}
.c-basic{
    flex: 1;
    text-align: center;
    margin-top: 12rem;
}




/*SECTION TITLES*/

.portfolio-title{
    font-weight: 200;
    font-family: 'B612 Mono', monospace;
    margin: 5% auto 0%;
}
.about-title{
    font-weight: 200;
    font-family: 'B612 Mono', monospace;
    margin: 5% auto 0%;
}
.contact-title{
    font-weight: 200;
    font-family: 'B612 Mono', monospace;
    margin: 5% auto 0%;
}