Javascript 图像链接上的悬停效果过度扩展了它所包围的div

因此，出于某种原因，当我将鼠标悬停在我用div包装的图像链接下面的特定点上时，它将触发我通过CSS创建的图像链接的悬停效果。我尝试过多种方法：溢出：隐藏，显示：内联块，但似乎没有任何效果。我将发布我的代码和一个JSFIDLE链接。提前谢谢

HTML:

jsiddle链接：

嵌套的是要检查悬停的div的一部分，因此它的大小也包括在内。如果您可以将移动到或其父级之外，则会解决问题，但会引入其他问题

<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>

嵌套的是要检查悬停的div的一部分，因此它的大小包括在内。如果您可以将移动到或其父级之外，则会解决问题，但会引入其他问题

<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>

---

段落标签是您的问题。您可以通过使用位置绝对值将其从正常html流中移除来解决此问题，如

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

---

段落标签是您的问题。您可以通过使用位置绝对值将其从正常html流中移除来解决此问题，如

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

---

非常感谢你的帮助！我能够通过在我的一个链接上添加一个边距来解决另一个问题，出于某种原因，我解决了这个问题。再次感谢。非常感谢你的帮助！我能够通过在我的一个链接上添加一个边距来解决另一个问题，出于某种原因，我解决了这个问题。再次感谢。