我试图将员工的名字放在他们的肖像上。
我正在遍历对象对象以按雇用年份获取员工
var classes = {
2013: {
"image/path.png" : "name of employee",
"image/path2.png" : "name of employee2"
},
2012...
}
我用 jQuery 循环遍历它们,each
以按雇用年份显示他们的肖像和姓名:
jQuery(document).ready(function($){
//identify all elements in <li>
$('li').on('mouseover', function(e){
$('#overlay').empty();
var title = $('<h2>');
title.text('Class of ' + e.target.id);
$('#overlay').append(title);
$.each(classes[e.target.id], function(path, name) {
var img = $('<img/>');
img.attr('src', path);
$('#overlay').append("<span class='imagesContainer'>");
$('#overlay').append(img);
$('#overlay').append("<span class='names'>" + name + "</span>");
$('#overlay').append("</span>");
});
});
});
为了让他们的名字出现在他们各自的肖像上,我已经按照这个指南并尝试将图像封装在一个位置:相对容器($('#overlay').append("<span class='imagesContainer'>"); ... append image here ... $('#overlay').append("</span>");
,然后通过定位:绝对......但它不起作用...
CSS:
#overlay {
position: relative;
float: left;
width: 100%;
}
.imagesContainer {
position: relative;
float: left;
}
.names {
position: absolute;
/*background: rgba(0, 0, 0, 0.7);*/
padding: 5px;
color: white;
font-size: 12px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
有什么想法可以让每个名字出现在正确的图像上吗?
谢谢!