[카페24] jQuery 이미지에 마우스 올리면 상세 내역 뜨게 하기 /mouseenter/mouseleave/id

★목표★

↓상품들의 사진만 쭉 나오게하고 상품명등 상세내역은 마우스를 올리면 뜨게 하는 레이아웃↓

html 코드

              <div module="product_listmain_1">
                    <!--@css(/layout/basic/css/new_item.css)--> 
                        <!--
                            $count = 6
                            $basket_result = /product/add_basket.html
                            $basket_option = /product/basket_option.html
                        -->
                        <!--.추천 상품-->
                        <ul class="prdList column3" id="new-product">  
                             <li id="anchorBoxId_{$product_no}">
                                  <a href="{$link_product_detail}" class="prdImg"><img src="{$image_medium}" alt="" class="new-product_img" /></a>
                                  <a href="{$link_product_detail}">
                                    <div class="new-product_item">                                    
                                        <div id="new-product_icon">
                                            <div class="icon">{$new_icon}{$soldout_icon}</div>
                                        </div>                                  
                                        <div id="new-product_name">
                                            <p><p class="title {$product_name_title_display|display}">{$product_name_title} :</p> {$product_name}</p>
                                        </div>                                    
                                    
                                        <div id="new-product_price">                                                                          
                                            <span class="price new_item_text">{$price_unit_head}{$product_price|numberformat}{$price_unit_tail}</span> 
                                        </div>
                                  </div>  
                                  </a>
                                                                                                 
                            </li>                            
                            <li id="anchorBoxId_{$product_no}">
                                <a href="{$link_product_detail}" class="prdImg"><img src="{$image_medium}" alt="" class="new-product_img"/></a>
                                <a href="{$link_product_detail}">
                                    <div class="new-product_item">                                    
                                        <div id="new-product_icon">
                                            <div class="icon">{$new_icon}{$soldout_icon}</div>
                                        </div>                                  
                                        <div id="new-product_name">
                                            <p><p class="title {$product_name_title_display|display}">{$product_name_title} :</p> {$product_name}</p>
                                        </div>                                    
                                    
                                        <div id="new-product_price">                                                                          
                                            <span class="price new_item_text">{$price_unit_head}{$product_price|numberformat}{$price_unit_tail}</span> 
                                        </div>
                                  </div>  
                                  </a>                                                           
                          </li>     
                        </ul>
                    </div>

 

처음에 CSS mouseover(:hover)로 시도하려고 했으나 선택자의 문제인건지 제대로 동작을 하지 않아서 결국 js/jquery를 검색했다.

 

   * new-product_item (가격등 내용이 적힌  div) 

   * new-product_img (보여지는 사진)

$(document).ready(function() {
    $(".new-product_item").hide();
    
    $(".new-product_img").mouseenter(function() {
       $(".new-product_item").show();
       }),
    $(".new-product_img").mouseleave(function() {
       $(".new-product_item").hide();
       })
        
});

 

mouseover로 진행을 했었으나 생각보다 매끄럽게 작동을 하지 않아서 mouseenter/mouseleave로 변경했다.

동작은 잘되나 개별이 아닌 하나를 mouseover하면 전체의 내용이 뜨는 현상이 발생.

(단일적인 것을 하고 싶다면 이걸로도 문제없다.)

 

↓

 

each 반복문을 사용하여 각 이미지와 내용 부분에 아이디를 '클래스 이름+index'로 부여하고, mouseenter/leave에 각 아이디로 진행되도록 변경!

$(document).ready(function() {
    $(".new-product_item").hide();
    
    $(".new-product_img").each(function(i) {
        var row = $(this)
        row.attr('id', 'new-product_img' + i);
    });

    $(".new-product_item").each(function(i) {
        var row = $(this)
        row.attr('id', 'new-product_item' + i);
    });
 

    $(".new-product_img").each(function( index, element ) {
        $("#new-product_img"+index).mouseenter(function() {
            $("#new-product_item"+index).show();
        }),
        $("#new-product_img"+index).mouseleave(function() {
            $("#new-product_item"+index).hide();
        })
      });   
});

 

★결과물★