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

时间：2015-06-20 18:02:55

标签： javascript jquery html css

当用户在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;
}

6 个答案:

答案 0 :(得分：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;
}

答案 1 :(得分：0)

将DIV包裹在锚点

中

尝试：

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

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

编辑：

通过你的小提琴，你的代码看起来相当复杂，我将无法深入研究它。

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

祝你好运！

答案 2 :(得分：0)

这是一个使用它的JSFiddle https://jsfiddle.net/Lfz34a8x/

你想把你的div包装在＆＃34; a＆＃34; tag（并删除其他＆＃34; a＆＃34;标记）。例如：

<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 :(得分：0)

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

为链接添加aditonal css 

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

demo

答案 4 :(得分：0)

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

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

<a href="#">

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

希望这能帮到你！

干杯！

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

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

相关问题
最新问题