画像リンク上のホバリング効果は、それが囲まれているdivを過大にしています

Question

画像リンクの下の特定のポイントにカーソルを合わせると、divにラップされている画像リンクのホバー効果がトリガーされます私はCSSを通して作りました。私は複数のことを試みました（オーバーフロー：隠し、表示：インラインブロック）が、何も動作していないようです。私は自分のコードとjsfiddleリンクを掲示します。前もって感謝します。

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リンク：https://jsfiddle.net/26vutwz9/

Answer 1

ネストされた<p>は、あなたがそう、そのサイズが含まれているhoverをチェックされているdiv要素の一部です。 <div id="portfolio_project_child">またはその親以外の<p>を移動することができれば、問題を解決します（しかし他のものを紹介します）。

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