Hovering-Effekt über Bild-Link ist überfordert das div ist es in

Question

So aus irgendeinem Grund, wenn ich schweben über bestimmte Punkte unter einem Bild-Link, den ich in einem div eingewickelt ist, wird es den Schwebeeffekt für den Bild-Link auslösen Ich habe über CSS erstellt. Ich habe mehrere Dinge versucht (Überlauf: versteckt, Anzeige: Inline-Block) aber nichts scheint zu funktionieren. Ich werde meinen Code und einen Link veröffentlichen. Danke im Voraus.

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

Die verschachtelte <p> Teil des div ist, dass Sie für die hover werden überprüft, so dass ihre Größe enthalten ist. Wenn Sie das <p> außerhalb des <div id="portfolio_project_child"> oder seines Elternteils verschieben können, wird es das Problem lösen (aber andere einführen).

<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

Der Absatz-Tag ist Ihr Problem. Sie können es lösen, indem Sie es aus dem normalen HTML-Fluss mit einer absoluten Position, wie