懸停圖像 - 在其上顯示div

懸停時，我想要圖像右上方的鏈接apear。就像在Facebook上的個人資料圖片上，它說「更改圖片」。懸停圖像 - 在其上顯示div

我試圖讓它有點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; 

}

謝謝！

來源

2010-11-29 ryryan

是你想要它在右上角還是在它旁邊？ – 2010-11-29 18:34:06

這是我做的方式： 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的：在jsfiddle

$(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(); 
     }); 
});

測試此。

來源

2010-11-29 20:50:20 ryryan

，使圖像的DIV背景與相對定位和內部的div添加到它與覆蓋內容風格它顯示：無

然後 imgdiv：懸停innerdiv {顯示：塊} 會做招

來源

2010-11-29 18:32:32

嘗試

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <style> 
    .imgHover { 
     display: inline; 
     position: relative; 
    } 
    .imgHover .hover { 
     display: none; 
     position: absolute; 
     right: 5px; 
     top: 5px; 
     z-index: 2; 
    } 
    </style> 
</head> 

<body> <script> $(function() { $(".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(); }); }); </script> 

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

</body> </html>

來源

2010-11-29 18:36:44 simshaun

謝謝，但鏈接顯示在圖像的底部。：/ – ryryan 2010-11-29 19:44:57

你已經改變了一些東西，或者沒有提供一些改變它的代碼。如果您單獨運行我的示例，則會看到它按預期工作（編輯圖像右上方的鏈接）。 – simshaun 2010-11-29 20:47:13

感謝您的幫助，但沒有奏效。我設法做到這一點 – ryryan 2010-12-02 13:58:50

你需要絕對位置具有比正常流量的不同位置在容器的鏈接。在這個例子中，我在容器上使用相對的。試試這個：

HTML

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

CSS

.imgHover { float: left; } 
.imgContainer { position: relative; } 
.imgContainer a { display: block; position: absolute; top: 0; right: 0; background: Green;}

來源

2010-11-29 18:37:16 Bazzz

如果imgHover由以匹配其內容，那麼它應該只是position:relative和懸停類有position:absolute和top:0;right:0

http://www.jsfiddle.net/FvBqA/

來源

2010-11-29 18:39:08

懸停圖像 - 在其上顯示div

回答

相關問題