jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 悬停图像 – 显示div大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在悬停时,我想在图像的右上方显示一个链接.就像你在Facebook上的个人资料图片上所说的“改变图片”一样.

我试图让它使用一些jquery,但没有运气,因为它没有图像的右侧.由于它们是轮廓图像,因此图像将具有不同的尺寸.因此无论大小如何,它都需要保持在图像的右上角.

JQuery的:

$(".imgHover").hover(function() {
    $(this).children("img").fadeTo(200,0.25)
           .end().children(".hover").show();
},function() {
    $(this).children("img").fadeTo(200,1)
           .end().children(".hover").hide();
});

HTML:

<div class="imgHover">
    <div class="hover"><a href="htpp://google.com">Edit</a></div>
    <img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" />
</div>

CSS:

.imgHover .hover { 
    display: none;
    position:absolute;
    z-index: 2;

}

谢谢!

解决方法

这就是我这样做的方式:
CSS:
.imgHover {
    display: inline;
    position: relative;
}
.imgHover .hover {
    display: none;
    position: absolute;
    right:0;
    z-index: 2;
}

HTML:

<div class="imgHover">
<div class="hover"><a href="htpp://google.com">Edit</a></div>
<img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="">
</div>

JQuery的:

$(function() {
    $(".imgHover").hover(
        function() {
            $(this).children("img").fadeTo(200,0.85).end().children(".hover").show();
        },function() {
            $(this).children("img").fadeTo(200,1).end().children(".hover").hide();
        });
});

jsfiddle上测试一下.

大佬总结

以上是大佬教程为你收集整理的jquery – 悬停图像 – 显示div全部内容,希望文章能够帮你解决jquery – 悬停图像 – 显示div所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: