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

时间:2017-07-09 04:44:09

标签: javascript html css web-frontend

因此,出于某种原因,当我将鼠标悬停在图像链接下方的特定点上时,我将其包含在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/

2 个答案:

答案 0 :(得分:2)

嵌套<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/

答案 1 :(得分:2)

段落标记是您的问题。您可以通过使用绝对位置的正常html流程来解决它,例如

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