在悬停时创建一个div叠加链接

I have been trying to make my div overlay link to another page when the user hovers on the 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.

当用户在div上盘旋时，我一直在尝试将div叠加链接到另一个页面。我希望整个叠加层链接，而不仅仅是我目前拥有的文本链接。任何人都可以建议我哪里出错了。

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

6 个解决方案

#1

Wrap portfolio-project div by the anchor:

通过锚点包裹投资组合项目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;
}

#2

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). Example:

您希望将div包装在“a”标记中（并删除其他“a”标记）。例：

<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

阅读有关锚标记中嵌套元素的更多信息

#3

<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

添加aditonal css链接

.portfolio-overlay a.demoLink{
    width:100%;
    height:100%;
    position:absolute
}

demo

演示

#4

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. For instance, applying display: block and line-height to your link can help achieve your goal. However, your likely going to need to also make other changes to the CSS of the surrounding containers.

CSS可以对您希望实现的目标产生影响。例如，将display：block和line-height应用于您的链接可以帮助您实现目标。但是，您可能还需要对周围容器的CSS进行其他更改。

Best of luck!

祝你好运！

#5

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>

#6

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 &amp; 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。