为什么悬停后特定部分不可见？ [复制]答案

【问题标题】：Why a particular section is not visible after hover? [duplicate]为什么悬停后特定部分不可见？ [复制]
【发布时间】：2021-05-24 00:41:29
【问题描述】：

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

*{
    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>

【问题讨论】：

.text 不是.icon-info 的子级。这样做.icon-info:hover + .text {}
但是加了+之后，文本部分可见不稳定，1秒后就看不见了，这个问题的解决方法是什么

标签： html css hover effect

【解决方案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>

【讨论】：

但是加+后，文本部分可见不稳定，1秒后就看不见了，请问这个问题的解决方法是什么？
@ZannatulFerdousiHema-200 您可以设置图标的 z-index 属性。我编辑了我的答案