마우스 오버에서 별도의 div에있는 이미지와 텍스트를 어떻게 바꿀 수 있습니까?

Question

이미지를 만들려고하는데 해당 텍스트가 나타납니다. 다른 div에있는 텍스트는 onmouseover입니다. 내가 onmouseover<a> 태그의 텍스트에 해당 텍스트와 이미지를 별도의 div (<div class="col_2”>)로 표시하고 싶습니다. 따라서 키워드가 나타납니다. onmouseover 및 onmouseout 이전에는 기본 이미지와 텍스트가 교체 된 이미지와 텍스트가 나타나는 공간을 채우고 싶습니다. 나는 텍스트에서 이미지를 만들고 싶지 않다. 도와주세요. - mostgrateful

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