[英]make a div overlay link on hover
I have been trying to make my div overlay link to another page when the user hovers on the div. 当用户将鼠标悬停在div上时,我一直试图使div覆盖链接指向另一个页面。 I want the whole overlay to link and not just the text link that i currently have.
我希望链接整个链接,而不仅仅是我当前拥有的文本链接。 Can anyone advise where i have gone wrong.
谁能告诉我我哪里出问题了。
Jfiddle attached. Jfiddle附上。
https://jsfiddle.net/ahh6Lars/ https://jsfiddle.net/ahh6Lars/
<div class="portfolio-project-container">
<div class="portfolio-project">
<div class="portfolio-project-image">
<ul class="portfolio-project-image">
<li>
<div class="portfolio-project-image-one"></div>
<div class="portfolio-overlay"><a href="#"></a><div class="bt4">Marks & Spencer</div><div class="bt5"><a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title="">Summer Fete A5 Flyers</a></div><div class="bt6"></div></div>
</li>
</ul>
</div>
</div>
</div>
CSS CSS
.portfolio-overlay {
width:100%;
height:100%;
opacity: 0.75;
position:absolute;
background-color:black;
top:-100%;
transition: top 0.3s ease-in-out;
display:block;
}
.portfolio-overlay div {
position:relative;
display:inline-block;;
}
ul.portfolio-project-image {
list-style: none;
width:100%
}
ul.portfolio-project-image li {
position: relative;
display: inline-block;
width:100%;
height: 100%;
overflow: hidden;
}
li:hover .portfolio-overlay {
top: 0;
display:block;
}
.bt4 {
text-align: center;
margin-top: 160px;
font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 14px;
font-weight: 500;
color:#FFF;
width:100%;
height:10px;
margin-left:auto;
margin-right:auto;
}
.bt5 {
text-align: center;
font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 16px;
font-weight: 200;
color:#FFF;
width:100%;
height:10px;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
}
.portfolio-project {
width: 32%;
height: 373px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
margin-left:15px;
float:left;
}
.portfolio-project-image{
width: 100%;
height: 373px;
}
.portfolio-project-image-one{
width: 100%;
height: 373px;
background-image:url(../images/flyer_mock_up.jpg);
background-position:center;
}
.portfolio-project-image-one:hover{
width: 100%;
height: 373px;
background-image:url(../images/flyer_mock_up.jpg);
background-position:center;
display:block;
}
.bt5 a {
text-align: center;
font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 16px;
font-weight: 200;
color:#FFF;
width:100%;
height:10px;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
text-decoration:none;
}
Wrap portfolio-project
div by the anchor: 将
portfolio-project
div由主播包裹起来:
<div class="portfolio-project">
<a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title="">
<div class="portfolio-project-image">
<ul class="portfolio-project-image">
<li>
<div class="portfolio-project-image-one"></div>
<div class="portfolio-overlay"><div class="bt4">Marks & Spencer</div><div class="bt5">Summer Fete A5 Flyers</div><div class="bt6"></div></div>
</li>
</ul>
</div>
</a>
</div>
and apply following css in the anchor: 并在锚点中应用以下CSS:
a.html5lightbox {
height: 100%;
width: 100%;
display: block;
}
Wrap the DIV within the anchor 将DIV包裹在锚点内
Try: 尝试:
<a href="Yourhref.html">
<div class="overlay-or-whatever">Div content here</div>
</a>
You can then place as many elements within the a
as you please. 然后,您可以根据需要在
a
放置尽可能多的元素。
EDIT: 编辑:
Looking through your fiddle, your code looks rather complex and I won't be able to dive into it all. 查看您的小提琴,您的代码看起来相当复杂,我将无法深入研究所有内容。
The CSS can have an impact on what you wish to achieve. CSS可能会对您希望实现的目标产生影响。 For instance, applying
display: block
and line-height
to your link can help achieve your goal. 例如,将
display: block
和line-height
应用于链接可以帮助实现目标。 However, your likely going to need to also make other changes to the CSS of the surrounding containers. 但是,您可能还需要对周围容器的CSS进行其他更改。
Best of luck! 祝你好运!
Here is a JSFiddle with it working https://jsfiddle.net/Lfz34a8x/ 这是一个JSFiddle,它可以工作https://jsfiddle.net/Lfz34a8x/
You want to wrap your div in your "a" tag (And remove the other "a" tag). 您想将div包装在“ a”标签中(并删除其他“ a”标签)。 Example:
例:
<a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title="">
<div class="portfolio-overlay">
<div class="bt4">Marks & Spencer</div>
<div class="bt5">Summer Fete A5 Flyers</div>
<div class="bt6"></div>
</div>
</a>
Read more on nesting elements in anchor tags 阅读更多有关锚标签中嵌套元素的信息
<div class="portfolio-project-container">
<div class="portfolio-project">
<div class="portfolio-project-image">
<ul class="portfolio-project-image">
<li>
<div class="portfolio-project-image-one"></div>
<div class="portfolio-overlay"><a class="demoLink" href="#"></a><div class="bt4">Marks & Spencer</div><div class="bt5"><a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title="">Summer Fete A5 Flyers</a></div><div class="bt6"></div></div>
</li>
</ul>
</div>
</div>
</div>
Add aditonal css for link 添加肥胖的CSS链接
.portfolio-overlay a.demoLink{
width:100%;
height:100%;
position:absolute
}
Hi I don't know if you have had found the answer! 嗨,我不知道您是否找到答案! But it would be nice if you could check the code snippet I've entered here within this answer!
但是,如果您可以检查我在此答案中输入的代码段,那就太好了!
I just edited your code and fixed a slight bug which was in your HTML Code which was: 我刚刚编辑了您的代码,并修复了HTML代码中的一个小错误:
<a href="#">
I removed that part and wrapped the div within your required tag! 我删除了该部分并将div包装在您所需的标签内!
Hope this helps you! 希望这对您有所帮助!
Cheers! 干杯!
.portfolio-overlay { width:100%; height:100%; opacity: 0.75; position:absolute; background-color:black; top:-100%; transition: top 0.3s ease-in-out; display:block; } .portfolio-overlay div { position:relative; display:inline-block;; } ul.portfolio-project-image { list-style: none; width:100% } ul.portfolio-project-image li { position: relative; display: inline-block; width:100%; height: 100%; overflow: hidden; } li:hover .portfolio-overlay { top: 0; display:block; } .bt4 { text-align: center; margin-top: 160px; font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif; font-size: 14px; font-weight: 500; color:#FFF; width:100%; height:10px; margin-left:auto; margin-right:auto; } .bt5 { text-align: center; font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif; font-size: 16px; font-weight: 200; color:#FFF; width:100%; height:10px; margin-left:auto; margin-right:auto; margin-top: 10px; } .portfolio-project { width: 32%; height: 373px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); margin-left:15px; float:left; } .portfolio-project-image{ width: 100%; height: 373px; } .portfolio-project-image-one{ width: 100%; height: 373px; background-image:url(../images/flyer_mock_up.jpg); background-position:center; } .portfolio-project-image-one:hover{ width: 100%; height: 373px; background-image:url(../images/flyer_mock_up.jpg); background-position:center; display:block; } .bt5 a { text-align: center; font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif; font-size: 16px; font-weight: 200; color:#FFF; width:100%; height:10px; margin-left:auto; margin-right:auto; margin-top: 10px; text-decoration:none; }
<div class="portfolio-project-container"> <div class="portfolio-project"> <div class="portfolio-project-image"> <ul class="portfolio-project-image"> <li> <div class="portfolio-project-image-one"></div> <a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title=""> <div class="portfolio-overlay"><div class="bt4">Marks & Spencer</div><div class="bt5">Summer Fete A5 Flyers</div><div class="bt6"></div></div> </a> </li> </ul> </div> </div> </div>
I try to reduce all code to the minimum only center in the problem, but the enough html to made it comprehensible. 我尝试将所有代码减少到问题的最小中心,但是足够的html使其可理解。
https://jsfiddle.net/luarmr/ahh6Lars/4/ https://jsfiddle.net/luarmr/ahh6Lars/4/
HTML HTML
<ul class="portfolio-project-image">
<li><a href="images/flyer_mock_up.jpg">
<span>
Marks & Spencer
<span>Summer Fete A5 Flyers</span>
</span>
</a>
</li>
</ul>
CSS CSS
body{
font: 200 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
}
ul.portfolio-project-image{
margin:10px;
padding:0;
text-decoration:none;
list-style-type:none;
}
ul.portfolio-project-image li a,
ul.portfolio-project-image li a>span{
display:block;
width:200px;
height:300px;
text-align:center;
background:#fabada;
position:relative;
box-sizing:border-box;
overflow:hidden;
}
ul.portfolio-project-image li span{
display:block;
}
ul.portfolio-project-image li a>span{
padding-top:80px;
background:#fe0;
position:absolute;
top:-100%;
-webkit-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
ul.portfolio-project-image li a:hover>span{
top:0%;
}
Basically the link cover all elements, and internal span have the transition, I recommend to you as well use flex to center vertical the content, here I use directly padding-top. 基本上,链接覆盖了所有元素,并且内部范围具有过渡,我建议您也使用flex将内容居中垂直,这里我直接使用padding-top。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.