将鼠标悬停在图像 link 上的效果过度扩展了它所包围的 div

Question

所以出于某种原因，当我将鼠标悬停在图像下方的特定点上时 link 我将其包裹在 div 中，它会触发图像的悬停效果 link我通过 CSS 创建的。我尝试了多种方法（溢出：隐藏，display:inline-块）但似乎没有任何效果。我将 post 我的代码和一个 jsfiddle link。提前致谢。

HTML:

<div class="div_for_projects">
 <div class="project_inner_divs">
  <div id="portfolio_project">
    <div id="portfolio_project_child">
      <a href="index.html">
        <!--
        Image Source:
        http://www.connectwithchildlife.com/2015/10/child-life-portfolio.html
        -->
        <img class="portfolio_page_projects"
        src="http://www.vandelaydesign.com/wp-content/uploads/portfolio2.jpg"
        alt="portfolio_image">
      </a>
      <p>
        <a href="index.html"
        class="text_align project_description">
          PROJECT
        </a>
      </p>
      <a href="#">
        <img class="portfolio_sm_links"
        src="https://maxcdn.icons8.com/Share/icon/Editing//arrow_filled1600.png"
        alt="Portfolio Image Link">
      </a>
   </div>
  </div>
 </div>
</div>

CSS:

.div_for_projects {
  width: 100%;
  height: 420px;
}
.project_inner_divs {
  float: left;
  width: 35%;
}
#portfolio_project {
  position: relative;
  width: 426px;
  height: 420px;
  pointer-events: none;
  transition-duration: 0.4s;
}
#portfolio_project_child {
  pointer-events: auto;
  width: 100%;
  height: 100%;
}
#portfolio_project:hover {
  -webkit-filter: brightness(70%);
}
#portfolio_project:hover .project_description {
  visibility: visible;
  opacity: 1;
}
#portfolio_project:hover .portfolio_sm_links {
  visibility: visible;
  opacity: 1;
}
.portfolio_page_projects {
  width: 426px;
  height: 420px;
}
.project_description {
  position: relative;
  bottom: 250px;
  visibility: hidden;
  opacity: 0;
  transition-duration: 0.4s;
  font-size: 18px;
  font-family: Tahoma, Geneva, sans-serif;
  color: rgb(50, 50, 50);
  display: inline-block;
  left: 170px;
 }
.text_align {
  text-align: center;
}
.portfolio_sm_links {
  width: 40px;
  height: 40px;
  position: relative;
  bottom: 130px;
  left: 350px;
  visibility: hidden;
  display: inline-block;
  opacity: 0;
}
.portfolio_sm_links:hover {
  background-color: grey;
}

jsfiddle link: https://jsfiddle.net/26vutwz9/

Answer 1

嵌套的 <p> 是您正在检查 hover 的 div 的一部分，因此它的大小包括在内。如果您可以将 <p> 移到 <div id="portfolio_project_child"> 或其父级之外，它将解决问题（但引入其他）。

<div class="div_for_projects">
 <div class="project_inner_divs">
  <div id="portfolio_project">
    <div id="portfolio_project_child">
      <a href="index.html">
        <!--
        Image Source:
        http://www.connectwithchildlife.com/2015/10/child-life-portfolio.html
        -->
        <img class="portfolio_page_projects"
        src="http://www.vandelaydesign.com/wp-content/uploads/portfolio2.jpg"
        alt="portfolio_image">
      </a>
      <a href="#">
        <img class="portfolio_sm_links"
        src="https://maxcdn.icons8.com/Share/icon/Editing//arrow_filled1600.png"
        alt="Portfolio Image Link">
      </a>
   </div>
   <p>
     <a href="index.html"
      class="text_align project_description">
      PROJECT
     </a>
   </p>
  </div>
 </div>
</div>

https://jsfiddle.net/26vutwz9/1/

Answer 2

段落标记是您的问题。您可以通过将其从具有绝对位置的正常 html 流程中取出来解决它，例如

#portfolio_project_child p { position: absolute; top: 0; left:0 }

将鼠标悬停在图像 link 上的效果过度扩展了它所包围的 div

Hovering effect over image link is overextending the div it is surrounded in

html

javascript

css

web-frontend