问题描述
我做了一个设计，我想在将鼠标悬停在信息图标上后显示文本部分。但是在信息图标上悬停后它不起作用。请帮我。我无法在此代码中找到我的问题。但很可能我认为问题出在悬停部分。但我无法修复它。请帮我解决这个问题。
*{
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>解决方法
只需在悬停样式中添加一个 + 如下：
*{
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>