jquery - 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">用于插入多个元素，但这意味着您的文档中有重复的 ID，这不是有效的 html
2. .category-box应该有 position: relative;您可以使用 position: absolute 正确定位子元素
3. 根据以上几点，您可以简单地添加'top': 0, 'left': 0,给你的hoverbox

在您的代码中 $(this).css('top')将简单地返回值 auto这在这里没有影响。

---

Example