将鼠标悬停在其他元素

Question

我的叠加悬停有点问题。它运行不正常，因为当我将鼠标悬停在.portfolio-project（文本层）上时，悬浮在.portfolio-overlay上的情况正在转变。这很明显，但如何让它一起工作？

＆＃13;

＆＃13;

#portfolio .portfolio-grid {
  padding: 0px;
}

#portfolio .portfolio-project-name {
  position: relative;
  background-image: url('https://s16.postimg.org/5pfokew6t/GMZlk_Sr.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 550px;
  transition: ease-in .2s;
}

#portfolio .portfolio-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(222, 39, 94, 0.0);
  z-index: 1;
  transition: ease-in .3s;
}

#portfolio .portfolio-overlay:hover {
  background-color: rgba(222, 39, 94, 0.8);
}

#portfolio .portfolio-project {
  z-index: 1;
  position: absolute;
  left: 15%;
  top: 30%;
  max-width: 70%;
  text-align: center;
  color: #fff;

  p {
    margin-top: 20px;
  }
  i {
    margin-top: 20px;
    font-size: 40px;
  }
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sass/main.min.css">
<script src="https://use.fontawesome.com/ca1269ff60.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>		

<section id="portfolio">
  <div class="container-fluid portfolio-container">
    <div class="row">
          
      <a href="#" target="_blank">
        <div class="portfolio-grid col-xs-12 col-md-4">
          <div class="portfolio-overlay"></div>
          <div class="portfolio-project-name">
            <div class="portfolio-project">
              <h2>Project Name</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui non tortor gravida porta at imperdiet nibh. Ut finibus sapien vel nibh porta lacinia.</p>
              <i class="fa fa-angle-double-right" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </a>
					
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;  

Answer 1

您可以将pointer-events: none;添加到#portfolio .portfolio-project规则

＆＃13;

＆＃13;

#portfolio .portfolio-grid {
  padding: 0px;
}

#portfolio .portfolio-project-name {
  position: relative;
  background-image: url('https://s16.postimg.org/5pfokew6t/GMZlk_Sr.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 550px;
  transition: ease-in .2s;
}

#portfolio .portfolio-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(222, 39, 94, 0.0);
  z-index: 1;
  transition: ease-in .3s;
}

#portfolio .portfolio-overlay:hover {
  background-color: rgba(222, 39, 94, 0.8);
}

#portfolio .portfolio-project {
  z-index: 1;
  position: absolute;
  left: 15%;
  top: 30%;
  max-width: 70%;
  text-align: center;
  color: #fff;
  pointer-events:none;

  p {
    margin-top: 20px;
  }
  i {
    margin-top: 20px;
    font-size: 40px;
  }
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sass/main.min.css">
<script src="https://use.fontawesome.com/ca1269ff60.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>		

<section id="portfolio">
  <div class="container-fluid portfolio-container">
    <div class="row">
          
      <a href="#" target="_blank">
        <div class="portfolio-grid col-xs-12 col-md-4">
          <div class="portfolio-overlay"></div>
          <div class="portfolio-project-name">
            <div class="portfolio-project">
              <h2>Project Name</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui non tortor gravida porta at imperdiet nibh. Ut finibus sapien vel nibh porta lacinia.</p>
              <i class="fa fa-angle-double-right" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </a>
					
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要将.portfolio-project-name换入.portfolio-overlay。它必须是你正在盘旋的元素的孩子。

Answer 3

添加课程：

.portfolio-project {
  pointer-events:none;
}