jquery를 사용하여 div에 이미지를 표시하려면 어떻게합니까?

필자는 기능 목록을 가지고 있으며 아이콘과 헤더 (.top-wrapper 클래스의 코드)가있는 div 위로 마우스를 가져 가면 이미지를 표시해야합니다. 이제 jquery 코드가 생겼으나 호버에있는 모든 요소에서 작동합니다. 각 요소에서 개별적으로 작업해야합니다.jquery를 사용하여 div에 이미지를 표시하려면 어떻게합니까?

HTML :

<ul class="row features-list justify-content-center justify-content-md-between justify-content-lg-center"> 
      <li class="col-xl-3"> 
       <img src="images/features-card-img.png" alt="Bottle"> 
       <div class="d-flex flex-column bottle-text-wrapper arrow-up text-left mx-auto"> 
        <h3 class="features-item-header bottle-header">Redesigning With Personality</h3> 
        <span class="bottle-small-text ml-auto">in <span class="yellow-text">web design</span></span> 
       </div> 
      </li> 
      <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item"> 
       <div class="feature-top" id="feature-top-dev"> 
        <div class="top-wrapper"> 
        <i class="fa fa-desktop" aria-hidden="true"></i> 
        <h3 class="features-item-header">Web Development</h3> 
        </div> 
        <div class="hover-content"> 
         <img src="images/features-card-img.png" alt="Bottle"> 
        </div> 
       </div> 
       <div class="feature-bottom mx-auto"> 
        <p class="features-text">Lorem ipsum dolor sit amet, 
         consectetur.</p> 
       </div> 
      </li> 
      <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item"> 
       <div class="feature-top" id="feature-top-design"> 
        <div class="top-wrapper"> 
        <i class="fa fa-th" aria-hidden="true"></i> 
        <h3 class="features-item-header">Web Design</h3> 
        </div> 
        <div class="hover-content"> 
         <img src="images/features-card-img.png" alt="Bottle"> 
        </div> 
       </div> 
       <div class="feature-bottom mx-auto"> 
        <p class="features-text">Lorem ipsum dolor sit amet, 
         consectetur.</p> 
       </div> 
      </li> 
      <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item"> 
       <div class="feature-top" id="feature-top-graph-des"> 
        <div class="top-wrapper"> 
        <i class="fa fa-pencil" aria-hidden="true"></i> 
        <h3 class="features-item-header">Graphic Design</h3> 
        </div> 
        <div class="hover-content"> 
         <img src="images/features-card-img.png" alt="Bottle"> 
        </div> 
       </div> 
       <div class="feature-bottom mx-auto"> 
        <p class="features-text">Lorem ipsum dolor sit amet, 
         consectetur.</p> 
       </div> 
      </li> 
     </ul> 
    </div>

JQuery와 : 어떻게 보이는지

$('#feature-top-dev').hover(
     function() { 
      $('.top-wrapper').addClass('d-none'); 
      $('.feature-top').css({'padding': '0', 'background-color': '#f5f5f5'}); 
      $('.hover-content').fadeIn('slow'); 
     },function() { 
      $('.top-wrapper').removeClass('d-none'); 
      $('.feature-top').css({'padding': '20px 0', 'background-color': '#ffea00'}); 
      $('.hover-content').fadeOut('slow'); 
     } 
    );

스크린 샷 :이 필요 노란색 배경 사업부 위로 마우스에

이미지로 변경합니다.

출처

2017-12-30 Belial

don'을 떠날 때 t use id는 클래스 이름을 사용합니다. ID는 고유해야합니다. 당신이 id를 사용한다면 첫 번째 요소 인 –

은'id'가 요소마다 유일해야하므로'class'를 사용하십시오. –

내 코드가 작동하지만, "Web Development"를 가리키면 모든' div's 노란색 배경으로. 그러나 나는 웹 개발 (Web Development)의 "div"에 대해서만 이미지를 보여줄 필요가있다. – Belial

CSS를

img.hover { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    display: none; 
    width: 100%; 
}

같은 속성을 사용하면 IMG를 넣어해야 당신이 당신의 요소를 가져 때, 당신 fadeToggle() 이미지와 fadeToggle는()를 다시 마우스 어쩌면

출처

2017-12-30 20:41:12

jquery를 사용하여 div에 이미지를 표시하려면 어떻게합니까?

답변

관련 문제