我的叠加悬停有点问题。它运行不正常，因为当我将鼠标悬停在.portfolio-project（文本层）上时，悬浮在.portfolio-overlay上的情况正在转变。这很明显，但如何让它一起工作？
#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;
}
}<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>
答案 0 :(得分：3)
您可以将pointer-events: none;添加到#portfolio .portfolio-project规则
#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;
}
}<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>
答案 1 :(得分：0)
您需要将.portfolio-project-name换入.portfolio-overlay。它必须是你正在盘旋的元素的孩子。
答案 2 :(得分：0)
添加课程：
.portfolio-project {
pointer-events:none;
}