如何在悬停div时显示html列表?

时间:2017-02-09 08:54:54

标签: javascript

大家好我想把鼠标悬停在div.it上时显示为[对象对象]。我可以显示为list.i尝试下面的代码

var type= "x,y,z,a";
var active = type.split(",");
if (active .length == 0)
    feature.attributes.ShowExceptionType = "display:none";
else

var item, items = [];
for (var i = 0; i < active .length; i++) {
    item = {};
    item.active  = active [i];
    items.push(item);
}

var main = $("<ul>");
var str = "";
for (var i = 0; i < items.length; i++) {
    str += "<li>" + items[i].active  + "</li>";
}
main.html(str);
$(document.body).append(main);

feature.attributes.HoverContent =  $(document.body).append(main);
"description": "{{localize:iplMap:Mac}} : {ESN}<br/><div style='{ShowExceptionCount}' class='cart' id='append'>{{localize:iplMap:ExceptionType}}: ({ExceptionCount})</div>",

enter image description here

1 个答案:

答案 0 :(得分:0)

看看你是否已经在使用jQuery,你可以将它用于此:

https://jsfiddle.net/whmzt0nj/1/

我还更改了代码的一些部分,原因是功能原因:

var type= "x,y,z,a";
var active = type.split(",");

if (active.length == 0){
    feature.attributes.ShowExceptionType = "display:none";
} else {
    var item, items = [];
}

for (var i = 0; i < active.length; i++) {
    item = {};
    item.active  = active[i];
    items.push(item);
}

var main = $("ul");
var str = "";
for (var i = 0; i < items.length; i++) {
    str += "<li>" + items[i].active  + "</li>";
}

$('#append').html("<ul id='append-list'></ul>");
$("#append-list").append(str);

$('#append-list').hide();

$("#append").mouseenter(function(){
    $(this).children('#append-list').slideDown();
})

$("#append").mouseleave(function(){
    $(this).children('#append-list').slideUp();
})