Question

我有一个悬停功能，可以在悬停时将文字置于图像下方。但我希望文本覆盖（上）图像。因此，我们将鼠标悬停在图像上会淡出一点，文本将显示出来。

像这样：
Hover Hover2

任何人都可以帮助我吗？

这是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 ')}';
       });
   });

The Mako：

% 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

您的代码存在一些问题：

您正在使用<div id="hoverbox">插入多个元素，但这意味着您的文档中存在重复的ID，这是无效的HTML
.category-box应该position: relative;您可以使用position: absolute正确定位子元素
有了上述几点，您只需将'top': 0, 'left': 0,添加到hoverbox

在您的代码$(this).css('top')中，只会返回在此处无效的值auto。

<强> Example

Answer 2

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

CSS / jQuery - 悬停时图像上的文本

2 个答案: