Question

我意识到这可能是一个已经回答的问题，但我想问一下，如果市场上有新的东西，那么可以很容易地解决我的问题。

我正在使用javascript将图片加载到指定的坐标。

var span = document.createElement("span");
span.innerHTML = "<img src=\"source.gif\" id=\"someid\">";
span.style.position = "absolute";
span.style.left = coodinatesLeft[i] + "px";
span.style.top = coodinatesTop[i] + "px";
document.body.appendChild(span);

稍后，当鼠标翻过图像时，我想在jquery中使用简单的mouseenter函数

$("mydivid").mouseenter(function(){  $(this).text("something"); });

在那里写一个文字，图像在哪里。我想，我没有得到任何文字，因为图像比文本更具前景。其他时候我已经使用过它了，但它起了作用，但后来我只有一个div，而且没有实际的图像源。

有没有办法保留结构并将文字附加到图像上？

PS：我读过z-index，但不确定它是否正是我需要的，因为我没有为图像预先定义的css类。

提前致谢！

Answer 1

您应该使用event delegation来动态添加元素。

$('<span />')
    .html('<img src="source.gif" class="myImages">')
    .css({
        'position': 'absolute',
        'left': coodinatesLeft[i] + 'px',
        'top': coodinatesTop[i] + 'px'
    })
    .appendTo('body');


$('.myImages').hover(function() {
    $(this).append('<span id="myText">MY TEXT HERE</span>');
}, function() {
    $('#myText').remove();
});

<强> CSS：

#myText {
    height: same as .myImages;
    width: same as .myImages;
    opacity: .5;
    background: #ccc;
}

Answer 2

您可以尝试这样的事情：

var span = document.createElement("span");
span.innerHTML = "<img src=\"source.gif\" id=\"someid\" class=\"image-class\">";
span.style.position = "absolute";
span.style.left = coodinatesLeft[i] + "px";
span.style.top = coodinatesTop[i] + "px";

var imgText = document.createElement("span");
imgText.className = "overlay-text";
span.appendChild(imgText);

document.body.appendChild(span);

添加以下css：

.image-class {
    width: 100px;
    height: 100px;
    background-color: red;
}

.overlay-text {
    position: absolute;
    left: 0;
    top: 0;
}

请查看此jsfiddle：https://jsfiddle.net/duLL2wrj/

$("#mydivid").mouseenter(function(){  $(this).children('.overlay-text').text("something"); });

$("#mydivid").mouseleave(function(){  $(this).children('.overlay-text').text(""); });

通过动态添加的img

2 个答案: