表格行突出显示 +带图像的工具提示
我正在尝试编写一个脚本，该脚本将
- 突出显示表格行，并
- 在我位于该行时显示带有图像的工具提示
HTML
<table>
<tr class="thumbnail-item">
<td class="column-1">1</td>
<td class="column-2">2</td>
<td class="column-3">3</td>
<td class="column-4">4</td>
<div class="tiptip"><img src="img.jpg" alt=""/></div>
</tr>
</table>
jQuery
$(document).ready(function () {
$('.thumbnail-item').mouseenter(function(e) {
x = e.pageX;
y = e.pageY;
$(this).css('z-index','15')
$(this).css('background', '#800000')
$(this).css('color', '#ffffff')
$(this).css('cursor', 'default')
$(this).children(".tiptip").css({'top': y,'left': x,'display':'block'});
}).mousemove(function(e) {
x = e.pageX;
y = e.pageY;
$(this).children(".tiptip").css({'top': y,'left': x});
}).mouseleave(function() {
$(this).css('z-index','1')
$(this).css('background', 'none')
$(this).css('color', '#000000')
$(this).children(".tiptip").animate({"opacity": "hide"}, 0);
});
});
CSS
.tiptip
{
display: none;
position: absolute;
}
.thumbnail-item
{
position: relative;
}
图像不知何故无法显示。如果元素被隐藏，children() 是否不会选择它们？
I'm trying to write a script that will
- highlight table row and
- show me tooltip with image whenever I'm on that row
HTML
<table>
<tr class="thumbnail-item">
<td class="column-1">1</td>
<td class="column-2">2</td>
<td class="column-3">3</td>
<td class="column-4">4</td>
<div class="tiptip"><img src="img.jpg" alt=""/></div>
</tr>
</table>
jQuery
$(document).ready(function () {
$('.thumbnail-item').mouseenter(function(e) {
x = e.pageX;
y = e.pageY;
$(this).css('z-index','15')
$(this).css('background', '#800000')
$(this).css('color', '#ffffff')
$(this).css('cursor', 'default')
$(this).children(".tiptip").css({'top': y,'left': x,'display':'block'});
}).mousemove(function(e) {
x = e.pageX;
y = e.pageY;
$(this).children(".tiptip").css({'top': y,'left': x});
}).mouseleave(function() {
$(this).css('z-index','1')
$(this).css('background', 'none')
$(this).css('color', '#000000')
$(this).children(".tiptip").animate({"opacity": "hide"}, 0);
});
});
CSS
.tiptip
{
display: none;
position: absolute;
}
.thumbnail-item
{
position: relative;
}
Image somehow couldn't be shown. Will children() not select elements if they are hidden?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
表格行 (
) 中只能包含表格单元格 (、)。< br>参考：http:// www.w3.org/TR/html401/struct/tables.html#h-11.2.5
因此，使用一个单元格并将您的 div 放入其中，然后使用
.find()方法来瞄准它。示例位于 http://www.jsfiddle.net/gaby/egrMp/1
You can only have table cells (
<td>,<th>) in a table row (<tr>).reference: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.5
So use a cell and put your div in there, and use the
.find()method to target it.example at http://www.jsfiddle.net/gaby/egrMp/1
不允许将 div 元素（块项）放入表行内。
所有 jQuery 选择器都会选择所有元素，无论它们是否隐藏。
You aren't allowed to put a div element (block item) inside a table row.
All jQuery selectors select all elements, whether they are hidden or not.