Javascript 在悬停状态下创建div覆盖链接

我一直试图在用户悬停在div上时将我的div覆盖链接到另一个页面。我希望整个覆盖链接，而不仅仅是我当前拥有的文本链接。谁能告诉我哪里出了错

Jfiddle已连接

---

将DIV包在锚内

尝试：

然后，您可以在

a

中放置任意数量的元素

编辑：

从你的小提琴来看，你的代码看起来相当复杂，我不可能完全深入其中

CSS会对您希望实现的目标产生影响。例如，对链接应用

display:block

和

line height

可以帮助实现您的目标。但是，您可能还需要对周围容器的CSS进行其他更改

---

祝你好运

这里有一个JSFIDLE，它可以工作

您希望将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>

---

收尾

组合项目

主持人的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>

a.html5lightbox {
 height: 100%;
 width: 100%;
 display: block;
}

---

嗨，我不知道你是否找到了答案！ 但是如果你能检查一下我在这个答案中输入的代码片段，那就太好了

我刚刚编辑了您的代码并修复了HTML代码中的一个小错误，它是：

<a href="#">

我试图将所有代码减少到问题的最小中心，但要有足够的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>

---

基本上，链接覆盖所有元素，内部跨度具有过渡，我建议您也使用flex将内容垂直居中，这里我使用直接填充顶部。

内联元素内块元素可能重复的可能重复是一种不好的做法。

a.html5lightbox {
 height: 100%;
 width: 100%;
 display: block;
}

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

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

<a href="#">

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

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