将鼠标悬停在div上

Question

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

Jfiddle附上。

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

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

Answer 1

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

并在锚点中应用以下CSS：

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

Answer 2

将DIV包裹在锚点内

尝试：

<a href="Yourhref.html">
    <div class="overlay-or-whatever">Div content here</div>
</a>

然后，您可以根据需要在a放置尽可能多的元素。

编辑：

查看您的小提琴，您的代码看起来相当复杂，我将无法深入研究所有内容。

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

祝你好运！

Answer 3

这是一个JSFiddle，它可以工作https://jsfiddle.net/Lfz34a8x/

您想将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>

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

Answer 4

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

添加肥胖的CSS链接

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

演示

Answer 5

嗨，我不知道您是否找到答案！ 但是，如果您可以检查我在此答案中输入的代码段，那就太好了！

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

<a href="#">

我删除了该部分并将div包装在您所需的标签内！

希望这对您有所帮助！

干杯!

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

Answer 6

我尝试将所有代码减少到问题的最小中心，但是足够的html使其可理解。

https://jsfiddle.net/luarmr/ahh6Lars/4/

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

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

基本上，链接覆盖了所有元素，并且内部范围具有过渡，我建议您也使用flex将内容居中垂直，这里我直接使用padding-top。