jquery 悬停覆盖并带有标题
我想在我的作品集上实现带有标题的悬停叠加效果。 我正在使用基本的 nav ul li a img 列出我的工作，当将鼠标悬停在特定参考（带有链接的图像）上时，我只想要一个带有一些白色文本的黑色覆盖层
到目前为止，我已经得到了这个，但显然它破坏了我的链接，所以它只是一个简单的悬停覆盖，而且我似乎无法正确集成标题。此外，淡入过渡目前几乎不存在。
THE HTML
<section id="portfoliowrapper">
<nav>
<ul class="colum3">
<li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item" /></a></li>
<li><a href="portfolio_detail.aspx" title=""><img src="/images/businesscards_single_item.jpg" alt="businesscards_single_item" /></a></li>
<li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item" /></a></li>
</ul>
</nav><!-- //navcontainer -->
</section><!-- //portfoliowrapper-->
MY CSS
#portfoliowrapper { float: left;}
#portfoliowrapper nav .colum3 { float: left;}
#portfoliowrapper nav .colum3 a img { }
#portfoliowrapper nav .colum3 li {float: left;width: 253px;height: 220px;margin-right: 10px;margin-bottom: 10px; background: #555; }
#portfoliowrapper nav .colum3 li:last-child { margin-right: 0px;}
THE J
<script>
$(document).ready(function () {
$('.colum3 li a').bind('mouseover', function () {
$(this).parent('li').css({ position: 'relative' });
var img = $(this).children('img');
$('<div />').text(' ').css({
'height': img.height(),
'width': img.width(),
'background-color': '#000',
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': 0.6
}).bind('mouseout', function () {
$(this).fadeOut('fast', function () {
$(this).remove();
});
}).insertAfter(this).animate({
'opacity': 0.6
}, 'fast');
});
});
</script>
当我将鼠标悬停在参考上时，黑色叠加层会附带标题，我可以单击图片转到特定参考。
I want to achieve a hover overlay effect with caption on my portfolio.
I'm am listing my work using a basic nav ul li a img, and I simply want a black overlay with some white text, when hovering over a specific reference(image with link)
So far i've got this, but it apparently it disrupts my link, so it is just a simple hover overlay, and I can't seem to get the caption integrated correctly. Also the fadeIn transition is pretty much non existing at the moment.
THE HTML
<section id="portfoliowrapper">
<nav>
<ul class="colum3">
<li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item" /></a></li>
<li><a href="portfolio_detail.aspx" title=""><img src="/images/businesscards_single_item.jpg" alt="businesscards_single_item" /></a></li>
<li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item" /></a></li>
</ul>
</nav><!-- //navcontainer -->
</section><!-- //portfoliowrapper-->
MY CSS
#portfoliowrapper { float: left;}
#portfoliowrapper nav .colum3 { float: left;}
#portfoliowrapper nav .colum3 a img { }
#portfoliowrapper nav .colum3 li {float: left;width: 253px;height: 220px;margin-right: 10px;margin-bottom: 10px; background: #555; }
#portfoliowrapper nav .colum3 li:last-child { margin-right: 0px;}
THE J
<script>
$(document).ready(function () {
$('.colum3 li a').bind('mouseover', function () {
$(this).parent('li').css({ position: 'relative' });
var img = $(this).children('img');
$('<div />').text(' ').css({
'height': img.height(),
'width': img.width(),
'background-color': '#000',
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': 0.6
}).bind('mouseout', function () {
$(this).fadeOut('fast', function () {
$(this).remove();
});
}).insertAfter(this).animate({
'opacity': 0.6
}, 'fast');
});
});
</script>
When I hover over a reference, the black overlay comes along with caption, and I can click on the picture to go to the specific reference.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这是一个开始 - 我放弃了覆盖 div，转而使用覆盖文本位，并淡化图像本身。只要背景是深色/黑色，它看起来都是一样的。
http://jsfiddle.net/g6xVR/1/
Here's a start - I ditched the overlay div in favor of an overlay text bit, and fade the image itself. As long as the background is dark/black, it looks the same.
http://jsfiddle.net/g6xVR/1/
如果您使用 a 而不是 a ，则可以将标记插入标记内，这不会中断您的链接。只需将 span css 设置为“display: block”
如果可能，我建议在标记中写出标题，然后通过 CSS 隐藏它们，直到鼠标悬停为止。它比每次鼠标悬停时创建和删除 DOM 元素要快。
If you use a instead of a , you can insert the tag inside the tag, which won't disrupt your link. Just set the span css to "display: block"
If possible, I would recommend writing the captions out in your markup and then hiding them via CSS until the mouseover occurs. It's faster than creating and removing a DOM element on each mouseover.
试试这个： jsfiddle
这使用 title 属性在叠加层中显示。图像路径不是完整路径，因此小提琴不会显示您的图像（因此它并不完美），但您明白了。
Try this: jsfiddle
This uses the title attribute to display in the overlay. The image paths are not full paths, so the fiddle doesn't display your images (so it is not perfect), but you get the idea.