Javascript 如何在鼠标上方的单独div中交换图像和文本？

当我

onmouseover

文本在另一个div中时，我试图使图像及其相应的文本出现。当我

onmouseover

文本在

校长1







//假设“#contentTarget”是在中显示图像和文本的div。。。
//   ... “li.activeElements”是鼠标输入和输出元素
//   ... contentArray是要添加的内容集
//   ... 您需要#listofsuff中的活动元素列表
//jQuery
var showDefault=函数（）{
$（“#内容目标”）
.empty（）
.附加（“”）
.附加（“默认文本”）；
};
showDefault（）；
$.each（contentArray，function（idx，elem）{
$（“#listofsuff”）.append（$（elem.domNode）.on（“mouseenter”，function（））{
$（“contentTarget”）.empty（）.append（$（elem.hoverImage））.append（$（elem.textNode））；
}).on（“mouseleave”，showDefault））；
});

<ul id="menu">

    <li class="menu_left"><a href="#" class="drop">Services</a>

        <div class="dropdown">

            <div class="col_3">

                <h2>Header1</h2>

            </div>

            <div class="col_1">

                <ul class="greybox">

                    <li><a href="#">text 1</a></li>

                    <li><a href="#">text 2</a></li>

                    <li><a href="#">text 3</a></li>

                    <li><a href="#">text 4</a></li>

                    <li><a href="#">text 5</a></li>
                </ul>   

            </div>


            <div class="col_2”>
                <h2>Header2</h2>
            </div>

            <div class="col_3">

                <img src="../img/02.jpg" />
                <p>some text to be appear onmouseover of text 1</p>

                <img src="../img/01.jpg"  />
                <p>some different text to appear onmouseover of text 2</p>

                <img src="../img/02.jpg" />
                <p>some more different text to appear onmouseover of text 3</p>

                <img src="../img/01.jpg" />
                <p>and even more different text to appear onmouseover of text 4</p> 

                <img src="../img/01.jpg" />
                <p>and yes, even more different text to appear onmouseover of text 5</p>           
</div>

        </div>

    </li>

</ul>

// Assuming "#contentTarget" is the div to show image and text in...
//   ... And "li.activeElements" are the mouse in and out elements
//   ... and contentArray is the set of content to add
//   ... and you want the list of active elements in #listOfStuff


// jQuery
var showDefault = function(){
    $("#contentTarget")
      .empty()
      .append("<img src='defaultImage'/>")
      .append("defaultText");
};
showDefault();
$.each(contentArray, function(idx, elem){
     $("#listOfStuff").append($(elem.domNode).on("mouseenter", function(){
         $("contentTarget").empty().append($(elem.hoverImage)).append($(elem.textNode));
     }).on("mouseleave", showDefault));
});