Jquery 使用div标记在图像上显示文本

我希望使用div标记在图像上显示文本。我成功地从数据库中获取值并将其存储到脚本数组中。但是这些值没有显示出来。但我使用的是div标签，而不是将显示的图像文本。下面是我的代码

 <script >
        var i=0;
        var st1=new Array();
        var st2=new Array();
        var st3=new Array();
       // var obj={"A","B","C","D"};
   $(document).ready(function(){
  $("#myimg").hover(function(){


  <c:forEach var="d"  items="${data}" >
        <c:set var="st1" value="${fn:substringBefore(d,'-')}" />            
        <c:set var="st2" value="${fn:substringAfter(d,'-')}" />



         st1.push("${st1}");             
         st2.push("${st2}");

    </c:forEach>
    <c:forEach var="d1"  items="${data1}" >
        <c:set var="st22" value="${d1}" />       
            st3.push("${st22}");

  </c:forEach>

  for(var i=0;i<6;i++)
      {

  var X=st1[i];      
  var Y=st2[i];
  var txt=st3[i];

        var test = $("<span class='test'></span>");

  test.html(txt);

  $("#myimg").append(test.offset({left:X,top:Y}));

   }

  }, function(){
    $('.test').remove();
  }
 );

 });

    </script>

    <div class="test">div-test </div>
    <img id="myimg" src="mirchi2.jpg" width="500" height="500">
    </body>
    </html>

var i=0；
var st1=新数组（）；
var st2=新数组（）；
var st3=新数组（）；
//var obj={“A”、“B”、“C”、“D”}；
$（文档）.ready（函数（）{
$（“#myimg”）.hover（函数（）{
st1.push（“${st1}”）；
st2.push（“${st2}”）；
st3.push（“${st22}”）；
对于（var i=0；i使用
和
显示：内联块；
和
背景图像：url（image.png）；

然后在
中可以添加新的子项，从而添加文本。正如ahren所说，
（如

和
）是一个单数标记，不能有子项

<div id="myimg" style="background-image: url(mirchi2.jpg); width: 500px; height: 500px;">
    <div>More content</div>
</div>

HTML

<div id="myimg">
    <div>More content</div>
</div>


更多内容
不要附加DIV-执行以下操作：

编辑完全工作示例：

jQuery：

$(document).ready(function(){
    $("#image1").hover(function(){
        $("#text-pop").fadeIn(800);
        $("#text-pop").css({
            "position": "absolute",
            "top": "25%",
            "left": "20%",
            "background": "yellow",
            "padding": "30px"
        })
    }, function(){
        $("#text-pop").hide();
    }
    );
});

img
元素不能有子元素，因此不能附加到…它将显示输出，但图像标签的外侧将显示如何在图像标签内显示？只需定位div，使其位于图像上方-什么是“在图像标签内显示”？不可能在图像内放置任何内容（合法）。@user1990992我用一个完全有效的例子编辑了我的答案
<div class="image-container"> <!-- MAKE SURE THIS IS POSITION RELATIVE! -->
    <img id="image1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTKWtn1KeBcz5Ydr3Hv6aYTCjiqbqFg2DfB422smPV21TS7kjVh" alt="some alt" />
    <div id="text-pop">This is some text</div>
</div>

.image-container{
    position: relative;
}
#text-pop{
    display: none;
    position: absolute;
}

$(document).ready(function(){
    $("#image1").hover(function(){
        $("#text-pop").fadeIn(800);
        $("#text-pop").css({
            "position": "absolute",
            "top": "25%",
            "left": "20%",
            "background": "yellow",
            "padding": "30px"
        })
    }, function(){
        $("#text-pop").hide();
    }
    );
});