我的 CSS 悬停代码的确切错误是什么？

Question

在我的社交媒体图标项目中，我尝试使用不透明度 0 隐藏我的文本。当用户将鼠标悬停在我的标签或图标上时，将显示文本。但我的悬停过渡不起作用。请首先尝试在我的 CSS in .icon 中使用不透明度 1。 enter image description here.请解决我的悬停问题。我不明白这是什么错误

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(235, 219, 222);
    font-family: 'Poppins', sans-serif;
}
.wrapper {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

a {
    position: relative;
    display: block;
    width: 57px;
    height: 57px;
    background-color: #fff;
    text-decoration: none;
    font-size: 22px;
    margin: 10px;
    border-radius: 50%;
    text-align: center;
    line-height: 57px;
    color: black;
    transition: 0.4s;
}





.icon {
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    margin: 5px;
    padding: 10px;
    transition: 0.4s;;
    opacity: 0;
}
.icon_holder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon::before {
    content: '';
    position: absolute;
    display: block;
    width: 13px;
    height: 13px;
    background-color: #fff;
    top:83% ;
    left:42% ;
    transform: rotate(45deg);
    transition: 0.4s;

}
.wrapper>.icon_holder:nth-child(1)>a:hover .wrapper>.icon_holder:nth-child(1)>.icon{
    opacity: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
    <div class="wrapper">
        <div class="icon_holder">
            <div class="icon">Facebook</div>
            <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
        </div>
        <div class="icon_holder">
            <div class="icon">Twitter</div>
            <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
        </div>
        <div class="icon_holder">
            <div class="icon">Instagram</div>
            <a href="#" class="instagram"><i class="fab fa-instagram"></i></a>
    
        </div>
        <div class="icon_holder">
            <div class="icon">Reddit</div>
            <a href="#" class="reddit"><i class="fab fa-reddit-alien"></i></a>
        </div>
        <div class="icon_holder">
            <div class="icon">Youtube</div>
            <a href="#" class="youtube"><i class="fab fa-youtube"></i></a>
        </div>








    </div>
    
</body>
</html>

请帮助我。

Answer 1

你在 CSS 上有一个错误：

.icon {
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    margin: 5px;
    padding: 10px;
    **transition: 0.4s;;**
    opacity: 0;
}

过渡线多了一个分号，小错别字..

Answer 2

您的hover规则有误，不会触发，请替换为：

.wrapper .icon_holder:hover .icon {
   opacity: 1;
}

工作示例：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(235, 219, 222);
    font-family: 'Poppins', sans-serif;
}
.wrapper {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

a {
    position: relative;
    display: block;
    width: 57px;
    height: 57px;
    background-color: #fff;
    text-decoration: none;
    font-size: 22px;
    margin: 10px;
    border-radius: 50%;
    text-align: center;
    line-height: 57px;
    color: black;
    transition: 0.4s;
}





.icon {
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    margin: 5px;
    padding: 10px;
    transition: 0.4s;;
    opacity: 0;
}
.icon_holder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon::before {
    content: '';
    position: absolute;
    display: block;
    width: 13px;
    height: 13px;
    background-color: #fff;
    top:83% ;
    left:42% ;
    transform: rotate(45deg);
    transition: 0.4s;

}
.wrapper .icon_holder:hover .icon {
    opacity: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
    <div class="wrapper">
        <div class="icon_holder">
            <div class="icon">Facebook</div>
            <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
        </div>
        <div class="icon_holder">
            <div class="icon">Twitter</div>
            <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
        </div>
        <div class="icon_holder">
            <div class="icon">Instagram</div>
            <a href="#" class="instagram"><i class="fab fa-instagram"></i></a>
    
        </div>
        <div class="icon_holder">
            <div class="icon">Reddit</div>
            <a href="#" class="reddit"><i class="fab fa-reddit-alien"></i></a>
        </div>
        <div class="icon_holder">
            <div class="icon">Youtube</div>
            <a href="#" class="youtube"><i class="fab fa-youtube"></i></a>
        </div>








    </div>
    
</body>
</html>

我的 CSS 悬停代码的确切错误是什么？

What's the exact bug with my CSS hovering code?

html

css

mousehover