jquery – 悬停图像 – 显示div

前端之家收集整理的这篇文章主要介绍了jquery – 悬停图像 – 显示div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在悬停时,我想在图像的右上方显示一个链接.就像你在Facebook上的个人资料图片上所说的“改变图片”一样.

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

JQuery的:

  1. $(".imgHover").hover(function() {
  2. $(this).children("img").fadeTo(200,0.25)
  3. .end().children(".hover").show();
  4. },function() {
  5. $(this).children("img").fadeTo(200,1)
  6. .end().children(".hover").hide();
  7. });

HTML:

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

CSS:

  1. .imgHover .hover {
  2. display: none;
  3. position:absolute;
  4. z-index: 2;
  5.  
  6. }

谢谢!

解决方法

这就是我这样做的方式:
CSS:
  1. .imgHover {
  2. display: inline;
  3. position: relative;
  4. }
  5. .imgHover .hover {
  6. display: none;
  7. position: absolute;
  8. right:0;
  9. z-index: 2;
  10. }

HTML:

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

JQuery的:

  1. $(function() {
  2. $(".imgHover").hover(
  3. function() {
  4. $(this).children("img").fadeTo(200,0.85).end().children(".hover").show();
  5. },function() {
  6. $(this).children("img").fadeTo(200,1).end().children(".hover").hide();
  7. });
  8. });

jsfiddle上测试一下.

猜你在找的jQuery相关文章