html - 将鼠标悬停在父元素内的元素上而不是在另一个子元素上时使元素移动

Question

我有这个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;
}

有什么想法吗？

Answer 1

如果您可以将 .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;
}