如何停止重叠悬停颜色在文本/超链接写，在CSS？

zsohkypk 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(114)

当鼠标悬停在名为nav-part2的导航菜单的div中的文本/超链接上时，鼠标悬停只是重叠它。这导致根本不显示文本。如何停止此操作并 * 使文本覆盖悬停动画？？*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
    font-family: border-box;
}

html, body {
    height: 100%;
    width: 100;
}

#page1{
    height:100vh;
    width: 100%;
    background-color: #efeae3;
    position: relative;
}

nav{
    padding: 2vw 2vw;
    width: 100%;
    /* background-color: red;  */
    display: flex;
    align-items: center;

    justify-content: space-between;
}

#nav-part2{
    display: flex;
    align-items: center;
    gap: 1vw;
}

#nav-part2 h4{
    padding: 10px 20px;
    border:  1px solid #8a8a8a89;
    border-radius: 50px;
    font-weight: 500;
    color: #000000bb;
    position: relative;
    font-size: 18px;
    transition: all ease 0.4s;
    overflow: hidden;
} 

#nav-part2 h4::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: gray;
    left: 0;
    bottom: -100%;
    border-radius: 50%;
    transition: all ease 0.4s;
}

#nav-part2 h4:hover::after{             /* nav k part 2 pe jo h4 hai, uske hover hone ka after effect , if you use space before :: ,  then that means after effect of the content of the hover of h4 */
    bottom: 0;
    border-radius: 0;
}

#nav-part2 h4 a{
    color: #000000bb;
    text-decoration: none;
    z-index: relative;
    position: relative;
}

#nav-part2 h4:hover::a{
    color: white;
    
}


       </style>
</head>
<body>
    <div id="main">
        <div id="page1">
          <nav>
            <!-- logo image (in navigation bar ) -->
            <img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15c2_Sundown%20logo.svg" alt="">
            <div id="nav-part2">
                <h4><a href="#">Work</a></h4>
                <h4><a href="#">Studio</h4>
                <h4><a href="#">Contact</h4>
            </div>
          </nav>
        </div>
    </div>

    <script src="script.js">

    </script>
</body>
</html>

字符串
我想在悬停动画上显示文本，但它只是重叠，我试图改变文本的颜色，因为我认为这可能是它只是不显示黑色的原因，但事实并非如此。我也试图改变悬停的位置为绝对，但它只是小故障，并开始最小化div每当我悬停。

css

来源：https://stackoverflow.com/questions/77756763/how-to-stop-overlapping-the-hover-color-over-the-text-hyperlink-written-in-css

1条答案

按热度按时间

bxfogqkk1#

唯一的问题是z索引。请更改这个代码，

#nav-part2 h4 a{
color: #000000bb;
text-decoration: none;
z-index: relative;
position: relative;}

字符串
这个

#nav-part2 h4 a{
color: #000000bb;
text-decoration: none;
z-index: 1;
position: relative;}

型

这里是工作示例-

* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
    font-family: border-box;
}

html, body {
    height: 100%;
    width: 100;
}

#page1{
    height:100vh;
    width: 100%;
    background-color: #efeae3;
    position: relative;
}

nav{
    padding: 2vw 2vw;
    width: 100%;
    /* background-color: red;  */
    display: flex;
    align-items: center;

    justify-content: space-between;
}

#nav-part2{
    display: flex;
    align-items: center;
    gap: 1vw;
}

#nav-part2 h4{
    padding: 10px 20px;
    border:  1px solid #8a8a8a89;
    border-radius: 50px;
    font-weight: 500;
    color: #000000bb;
    position: relative;
    font-size: 18px;
    transition: all ease 0.4s;
    overflow: hidden;
} 

#nav-part2 h4::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: gray;
    left: 0;
    bottom: -100%;
    border-radius: 50%;
    transition: all ease 0.4s;
}

#nav-part2 h4:hover::after{             /* nav k part 2 pe jo h4 hai, uske hover hone ka after effect , if you use space before :: ,  then that means after effect of the content of the hover of h4 */
    bottom: 0;
    border-radius: 0;
}

#nav-part2 h4 a{
    color: #000000bb;
    text-decoration: none;
    z-index: 1;
    position: relative;
}

#nav-part2 h4:hover::a{
    color: white;
    
}

<div id="main">
        <div id="page1">
          <nav>
            <!-- logo image (in navigation bar ) -->
            <img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15c2_Sundown%20logo.svg" alt="">
            <div id="nav-part2">
                <h4><a href="#">Work</a></h4>
                <h4><a href="#">Studio</h4>
                <h4><a href="#">Contact</h4>
            </div>
          </nav>
        </div>
    </div>

的字符串

赞(0）回复(0）举报 2024-01-09

我来回答

如何停止重叠悬停颜色在文本/超链接写，在CSS？

1条答案

相关问题

热门标签

最新问答