我有一个悬停功能,当悬停在图像上时,文本会放在图像下方。但我希望文字位于图像之上。这样我们您将鼠标悬停在图像上会淡出一点并显示文本。
像这样:
谁能帮帮我?
这是 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;
}
最佳答案
您的代码存在一些问题:
- 您正在使用
<div id="hoverbox">
用于插入多个元素,但这意味着您的文档中有重复的 ID,这不是有效的 html -
.category-box
应该有position: relative;
您可以使用position: absolute
正确定位子元素 - 根据以上几点,您可以简单地添加
'top': 0, 'left': 0,
给你的hoverbox
在您的代码中 $(this).css('top')
将简单地返回值 auto
这在这里没有影响。
关于jquery - CSS/jQuery - 悬停时图像上的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39101524/