为什么悬停后特定部分不可见？

Question

我做了一个设计，我想在将鼠标悬停在信息图标上后显示文本部分。但是将鼠标悬停在信息图标上后它不起作用。请帮我。我无法在此代码中找到我的问题。但很可能我认为问题出在悬停部分。但我无法修复它。请帮我解决这个问题。

*{
    margin: 0;
    padding: 0;
}
.hover1 {
    height: 500px;
    width: 700px;
    background: #00a8ff;
    margin: 10px auto;
    position: relative;
}

.icon-info{
    position: absolute;
    top: 150px;
    left: 500px;
    background: white;
    padding: 5px 11px;
    border-radius: 50%;
}

.text{
    height: 200px;
    width: 360px;
    background: white;
    position: relative;
    top: 150px;
    left: 130px;
    padding: 20px;
    border-radius: 13px;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
}

.text h3{
    font-size: 30px;
    margin: 20px 5px;
}

.text p{
    font-size: 18px;
}

/* hover */

.icon-info:hover .text{
    visibility: visible;
    opacity: 1;
    transition: .5s;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hover effect</title>
    <link rel="stylesheet" href="./hover.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
    <div class="hover1">
        <i class="fas fa-info icon-info"></i>
        <div class="text">
            <h3>This is Tittle</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur dolores quis enim facilis doloribus iste hic dolore cumque rerum, in earum omnis obcaecati blanditiis nostrum ab. Tempora officia voluptatibus ex!</p>
        </div>
    </div>
</body>
</html>

Answer 1

只需在悬停样式中添加一个+，如下所示：

*{
    margin: 0;
    padding: 0;
}
.hover1 {
    height: 500px;
    width: 700px;
    background: #00a8ff;
    margin: 10px auto;
    position: relative;
}

.icon-info{
    position: absolute;
    top: 150px;
    left: 500px;
    background: white;
    padding: 5px 11px;
    border-radius: 50%;
    z-index:1;
}

.text{
    height: 200px;
    width: 360px;
    background: white;
    position: relative;
    top: 150px;
    left: 130px;
    padding: 20px;
    border-radius: 13px;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
}

.text h3{
    font-size: 30px;
    margin: 20px 5px;
}

.text p{
    font-size: 18px;
}

/* hover */

.icon-info:hover + .text{
    visibility: visible;
    opacity: 1;
    transition: .5s;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hover effect</title>
    <link rel="stylesheet" href="./hover.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
    <div class="hover1">
        <i class="fas fa-info icon-info"></i>
        <div class="text">
            <h3>This is Tittle</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur dolores quis enim facilis doloribus iste hic dolore cumque rerum, in earum omnis obcaecati blanditiis nostrum ab. Tempora officia voluptatibus ex!</p>
        </div>
    </div>
</body>
</html>

为什么悬停后特定部分不可见？

Why a particular section is not visible after hover?

html

css

hover

effect