如何将鼠标悬停在单独的div中交换图像和文本？

Question

当我将onmouseover在不同div中的文本时，我试图制作图像及其对应的文本。 当我将onmouseover在<a>标记中的文本上时，我希望相应的文本和图像出现在单独的div中（ <div class="col_2”> ）。因此，出现了关键字。在onmouseover和onmouseout之前，我会例如使用默认图片和文字来填充所交换图片和文字的显示空间。我不想用文字制作图片。请帮忙-非常感谢

<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>

Answer 1

// 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));
});