[英]CSS hover problems
I am trying to create a hover effect (with html and CSS below). 我试图创建一个悬停效果(下面的html和CSS)。 The hover effect is working, but I can't get it on top of .portfolio_thumb.
悬停效果正在起作用,但是我无法在.portfolio_thumb之上使用它。
I am really not that proficient with CSS so be gentle :-) i have a test site running here: http://kazam.dk/36-2/#!prettyPhoto 我真的不是那么精通CSS,所以要温柔:-)我在这里运行一个测试站点: http : //kazam.dk/36-2/#!prettyPhoto
where you can see it loads beneath the picture! 您可以在图片下方看到它的位置!
css 的CSS
.portfolio_thumb{
position: relative;
z-index: 0;
}
.portfolio_thumb a span{
display: none;
position: relative;
float:left;
width:163px;
z-index: 2;
}
.portfolio_thumb a:hover span{
display: block;
position: absolute;
z-index: 9;
width:163px;
height: 229px;
}
HTML 的HTML
<div class="portfolio_thumb">
<!-- .portfolio_short_content -->
<div class="portfolie_short_content_containe">
<a class="lightbox" rel="lightbox" href="<?php echo $image[0]; ?>" title="<?php echo $image_desc; ?>">
<p class="textarea"><?php echo $full_descr; ?></p>
<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" alt="<?php echo $image_alt; ?>"></img>
<span>
<p><span class="lable"><?php echo $short_descr;?></span> </p>
<p><span class="lable"><?php echo $link; ?></span> </p>
</span>
</a>
</div>
</div>
它的工作检查在这里: http : //jsfiddle.net/surendraVsingh/fLZKe/2/ *( 更新 )
Try with following CSS and HTML code: 尝试使用以下CSS和HTML代码:
CSS
的CSS
.portfolio_thumb{
position: relative;
border:1px solid;
}
.portfolio_thumb a div{
display: none;
}
.portfolio_thumb a:hover{
position: inherit;
}
.portfolio_thumb a:hover div{
display: block;
position: absolute;
top:50px;
left:10px;
}
HTML
的HTML
<div class="portfolio_thumb">
<!-- .portfolio_short_content -->
<div class="portfolie_short_content_containe">
<a class="lightbox" rel="lightbox" href="<?php echo $image[0]; ?>" title="<?php echo $image_desc; ?>">
<p class="textarea"><?php echo $full_descr; ?></p>
<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" alt="<?php echo $image_alt; ?>"></img>
<div>
<p><span class="lable"><?php echo $short_descr;?></span> </p>
<p><span class="lable"><?php echo $link; ?></span> </p>
</div>
</a>
</div>
</div>
Move the <span>
tag above the <img>
tag and add a class to it (I used the class "hover" for below example). 将
<span>
标记移到<img>
<span>
标记上方,并向其中添加一个类(在下面的示例中,我使用了“ hover”类)。
Add that class to the CSS selectors. 将该类添加到CSS选择器中。 The rest of the CSS does not necessarily need to be changed, but you can position the hover
<span>
if you'd like. 其余的CSS不一定需要更改,但是您可以根据需要将鼠标悬停在
<span>
。
Working example: http://jsfiddle.net/x6Z2L/ 工作示例: http : //jsfiddle.net/x6Z2L/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.