CSS/jQuery - 懸停時圖像上的文字

Question

我有一個懸停功能，可以將文字懸停在圖像下。但是我希望文字覆蓋在圖像上。因此，我們將鼠標懸停在圖像上會淡出一點，文本將顯示。

像這樣：

任何人都可以幫我嗎？

這裏是jQuery的：

<%def name="javascript()"> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('.category-box').each(function() { 
      var hovertext = $(this).find('.hovertext').html(); 
      var hoverbox = $('<div id="hoverbox">' + hovertext + '</div>').css({ 
       'position': 'absolute', 
       'top': $(this).css('top'), 
       'left': $(this).css('left'), 
       'width': $(this).css('width'), 
       'background-color': '#f0f0f0', 
       'z-index': 1000, 
       'border-radius': '5px', 
       '-moz-border-radius': '5px', 
       '-webkit-border-radius': '5px', 
       'display': 'none', 
       'cursor': 'pointer' 
      }); 

      $(this).find('h4').after(hoverbox); 

      $(this).hover(function() { 
       hoverbox.fadeIn('fast'); 
      }, function() { 
       hoverbox.fadeOut('fast'); 
      }); 

      $(this).not('#mitp').click(function() { 
       location.href = '${request.route_url(' 
       new_case ', category=' 
       ')}' + $(this).find('h4').html(); 
      }); 
     }); 

     $('#mitp').click(function() { 
      location.href = '${request.route_url(' 
      mitp ')}'; 
     }); 
    }); 

尖吻鯖鯊：

% if categories: 

% for category in categories: 
    <div class="category-box"> 
     <img src="/category_icon/${category['id']}" width="120" height="120" /> 
     <h4>${category['name']}</h4> 
     <span class="hovertext"> 
     % if category['description'] != '.': 
      ${h.literal(category['description'])} 
     % endif 
     </span> 
    </div> 
% endfor 
% endif 

而CSS：

.category-box { 
    float: left; 
    margin: 15px 10px 5px 10px; 
    text-align: center; 
    width: 120px; 
    min-height: 120px; 
    cursor: pointer; 
} 

.category-box:hover { 
    cursor: pointer; 
    background-color: #f0f0f0; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.hovertext { 
    text-align: center; 
    display: none; 
} 

Answer 1

有你的代碼的幾個問題：

1. 您正在使用<div id="hoverbox">插入musltiple元素，但它意味着你有你的文件，這是不合法的HTML中重複的​​ID
2. .category-box應該有position: relative;，您可以用position: absolute
3. 有了點正確定位的子元素上面你可以簡單地添加'top': 0, 'left': 0,您hoverbox

在你的代碼$(this).css('top')將簡單的返回值auto它在這裏沒有任何效果。

---

Example

Answer 2

.hover { 
 
    display: none; 
 
    position: absolute; 
 
    margin: -150px 0px 0px 90px; 
 
    width:90px; 
 
    z-index:1; 
 
} 
 
.hover-content:hover .hover { 
 
    display: block; 
 
} 
 
.hover-content:hover img { 
 
    opacity: 0.4; 
 
}

<div class="hover-content" style="display:inline-block;"> 
 
<img src="http://i.stack.imgur.com/e3zYD.jpg"> 
 
<div class="hover"> 
 
Your text here man! 
 
</div> 
 
</div> 
 
<div class="hover-content" style="display:inline-block;"> 
 
<img src="http://i.stack.imgur.com/e3zYD.jpg"> 
 
<div class="hover"> 
 
Your text here man! 
 
</div> 
 
</div>