如何在圖像懸停的圖像高度中間設置以前的下一個圖標

我正在做像facebook一樣的上一個和下一個實驗，因爲我們在圖像上懸停，它會顯示上一個和下一個圖標。我使用簡單的CSS修改了一些圖標。但只有我缺少的東西是導航div的正確位置。無論圖像是600 * 600還是1024 * 800，我都希望它們位於圖像中間。如何在圖像懸停的圖像高度中間設置以前的下一個圖標

我嘗試了這些，但沒有取得任何進展 -

var maskHeight = ($('mainOne').height() - 50); 
$('#hoverP').css({top:maskHeight}).show(); 
$('#hoverN').css({top:maskHeight}).show();

這裏是樣品的測試案例，其中包括涉及到問題的一切，請Help.-

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <script src="./jQuery.min.js"></script> 
    <style> 
     .imgHover { 
      display: inline; 
      position: relative; 
     } 
     .imgHover .hoverP { 
      display: none; 
      position: absolute; 
      left: 3px; 
      top:-200px; 
      z-index: 2; 
     } 
     .imgHover .hoverN { 
      display: none; 
      position: absolute; 
      right: 0px; 
      top:-200px; 
      z-index: 2; 
     } 
     .prev_big,.next_big { 
      background-color:rgba(66,28,82,0.4);; 
      border:2px solid rgba(255,255,255,0.7); 
      color:#FFF; 
      font-size:78px; 
      font-weight:700; 
      width:30px; 
      height:200px; 
      line-height:200px; 
      -webkit-transition:.4s all; 
      -moz-transition:.4s all; 
      -o-transition:.4s all; 
      transition:.4s all; 
      text-shadow:0 1px 0 #FFF; 
      z-index:3; 
      text-decoration:none; 
      -moz-transition-duration:.4s; 
      -webkit-transition-duration:.4s; 
      -o-transition-duration:.4s; 
      transition-duration:.4s; 
     } 

     .prev_big { 
      border-bottom-right-radius:15px; 
      border-top-right-radius:15px; 
      margin-left:-3px; 
      padding:0 20px 0 0; 
     } 

     .next_big { 
      border-bottom-left-radius:15px; 
      border-top-left-radius:15px; 
      right:0; 
      padding:0 5px 0 15px; 
     } 

     .prev_big:hover,.next_big:hover { 
      color:#FFF; 
      background:#732C7B; 
      padding-top:140px; 
      padding-bottom:140px; 
     } 

    </style> 

</head> 
<script> 
$(function() { 
    $(".imgHover").hover(
     function() { 
      $(this).children("img").fadeTo(200, 0.95).end().children(".hoverP").show(); 
     }, 
     function() { 
      $(this).children("img").fadeTo(200, 1).end().children(".hoverP").hide(); 
     } 
    ); 
    $(".imgHover").hover(
     function() { 
      $(this).children("img").fadeTo(200, 0.95).end().children(".hoverN").show(); 
     }, 
     function() { 
      $(this).children("img").fadeTo(200, 1).end().children(".hoverN").hide(); 
     } 
    ); 
}); 
</script> 
<body> 

    <div class="imgHover"> 
     <div class="hoverP"><a class="prev_big" href="page1.html" title="View Previous Page"><</a></div> 
      <img id="mainOne" src="./oneB.jpg" alt=""> 
     <div class="hoverN"><a class="next_big" href="page3.html" title="View --Next-- Page">></a></div> 
    </div> 

</body> 
</html>

來源

2013-04-22 ArunK

爲什麼你需要的jQuery，一堆樣式與填充標記？我從完全從頭開始做這個，你看它是否有用

Demo

在另一方面，你可以使用轉換爲平滑 - Demo

<div class="wrapper"> 
    <img src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" /> 
    <div class="bar"><a href="#">Previous</a><a href="#">Next</a></div> 
</div>

CSS

div.wrapper { 
    position: relative; 
    display: inline-block; 
} 

.bar { 
    opacity: 0; 
    background: rgba(25,25,25,.5); 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 30px; 
    line-height: 30px; 
} 

div:hover .bar { 
    opacity: 1; 
} 

.wrapper a { 
    position: absolute; 
} 

.wrapper a:nth-of-type(1) { 
    left: 0; 
} 

.wrapper a:nth-of-type(2) { 
    right: 0; 
}

來源

2013-04-22 06:48:52

謝謝，我用這個邏輯與我的導航過渡... – ArunK 2013-04-22 13:18:35

@Arun你歡迎:) – 2013-04-22 13:19:07

如何在圖像懸停的圖像高度中間設置以前的下一個圖標

回答

相關問題