我有这个div
<div class="col-md-7 col-lg-6 row director-inner mx-auto py-3">
<div class="director-info row" onclick="void(0)">
<div class="col-md-5 col-6 offset-3 offset-md-0">
<img src="../junior/images/GS.png" alt="" class="py-2 profile-img" />
</div>
<div class="col-md-7 d-flex flex-column flex-md-row flex-wrap align-content-center text-center text-md-left">
<h3>First Last</h3>
<p><a href="tel:7327301000">732-730-1000</a> x635<br>
<a href="mailto:name@domain.org">name@domain.org</a><br>
<i class="fa fa-facebook-official" aria-hidden="true"></i> @name<br>
<i class="fa fa-instagram" aria-hidden="true"></i> <a href="https://www.instagram.com/name/">@name</a>
</div>
</div>
<div class="profile p-4" onclick="void(0)">
<h3 class="text-left profile-text">Name Last</h3>
<p class="text-justify profile-text" >Name, an Israeli native, is our Junior TorahMates Coordinator who is in charge of setting up TorahMate partnerships, and makes sure everyone’s learning is going well. If you have any questions, Name's the one who can help! When she’s not at her desk (and sometimes when she is!), Name enjoys dancing, books, and pizza. </p>
</div>
</div>
.director-info div显示整个时间。现在，当您将鼠标悬停在.director-info div上的任意位置时，.profile div会滑入。问题是您无法点击前div中的任何链接，因为只要您将鼠标悬停在那里的任何位置，.profile div掩盖它。
所以我想让它只是在鼠标悬停在img div上时滑入，保持在，并且一旦将光标移离图像，它就会滑出。我怎样才能做到这一点？这是我到目前为止的css：
.director-container{
z-index: 2;
position: relative;
}
.director-inner, .profile{
background-color:white;
border-radius: 15px;
}
.director-inner{
overflow:hidden;
position: relative;
}
.director-inner a{
text-decoration: none;
color:inherit;
}
.profile{
left:100%;
position: absolute;
height:100%;
width:100%;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.director-inner:hover .profile{
left:0;
}
.director h2{
font-weight: bold;
color:#fff;
font-size: 50px;
letter-spacing: .5px;
line-height: 1;
}
.director h3{
color:#004990;
font-weight: bold;
font-size: 30px;
padding-top:10px;
line-height: 1;
}
.director h3.profile-text{
font-size: 20px;
padding:0;
margin-bottom:5px;
margin-top:-1.5rem;
}
p.profile-text{
font-size:15px;
line-height: 1.4;
}
有什么想法吗？
答案 0 :(得分：0)
如果你可以将.profile移动到与img容器div相同的级别，这将有效：
.director-inner{
z-index: 2;
position: relative;
}
.director-inner, .profile{
background-color:white;
border-radius: 15px;
border:solid 1px red;
}
.director-inner{
overflow:hidden;
position: relative;
}
.director-inner a{
text-decoration: none;
color:inherit;
}
.profile{
left:100%;
top:0;
position: absolute;
height:100%;
width:100%;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.director-info>div:first-child:hover ~ .profile{
left:0;
pointer-events:none;
}
.director h2{
font-weight: bold;
color:#fff;
font-size: 50px;
letter-spacing: .5px;
line-height: 1;
}
.director h3{
color:#004990;
font-weight: bold;
font-size: 30px;
padding-top:10px;
line-height: 1;
}
.director h3.profile-text{
font-size: 20px;
padding:0;
margin-bottom:5px;
margin-top:-1.5rem;
}
p.profile-text{
font-size:15px;
line-height: 1.4;
}<div class="col-md-7 col-lg-6 row director-inner mx-auto py-3">
<div class="director-info row" onclick="void(0)">
<div class="col-md-5 col-6 offset-3 offset-md-0">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" class="py-2 profile-img" />
</div>
<div class="col-md-7 d-flex flex-column flex-md-row flex-wrap align-content-center text-center text-md-left">
<h3>First Last</h3>
<p>
<a href="tel:7327301000">732-730-1000</a> x635<br>
<a href="mailto:name@domain.org">name@domain.org</a><br>
<i class="fa fa-facebook-official" aria-hidden="true"></i> @name<br>
<i class="fa fa-instagram" aria-hidden="true"></i>
<a href="https://www.instagram.com/name/">@name</a>
</p>
</div>
<div class="profile p-4" onclick="void(0)">
<h3 class="text-left profile-text">Name Last</h3>
<p class="text-justify profile-text" >Name, an Israeli native, is our Junior TorahMates Coordinator who is in charge of setting up TorahMate partnerships, and makes sure everyone’s learning is going well. If you have any questions, Name's the one who can help! When she’s not at her desk (and sometimes when she is!), Name enjoys dancing, books, and pizza. </p>
</div>
</div>
</div>
使用当前结构，您无法编写所需的css选择器
如果您绝对需要保留结构，请考虑在悬停时为链接部分提供更大的z-index：
.col-md-7:hover{
z-index:3;
position:relative;
}