因此,出于某种原因,当我将鼠标悬停在图像链接下方的特定点上时,我将其包含在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/
答案 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>
答案 1 :(得分:2)
段落标记是您的问题。您可以通过使用绝对位置的正常html流程来解决它,例如
#portfolio_project_child p { position: absolute; top: 0; left:0 }