나는 이것에 대해 처음이라고 말하면서 시작하겠습니다. 사용중인 템플릿의 코드가 있습니다. 메뉴 드롭 다운에는 다른 페이지에 대한 링크 목록이 있으며 그 옆에는 이미지가 있습니다. 각 링크 위로 마우스를 가져갈 때 이미지를 다른 이미지로 변경하려면 무엇을 추가해야합니까?
다음은 코드입니다.
<li class="menu-item-has-children megamenu">
<a href="#">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Equipment
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
<ul class="nav-item-children">
<li>
<div class="container megamenu-container">
<div class="vc_row row megamenu-inner-row bg-white p-0">
<div class="container ld-container">
<div class="row ld-row">
<div class="megamenu-column col-md-3 py-md-3 px-md-4">
<div class="megamenu-column-inner pl-md-4 py-md-4">
<ul class="lqd-custom-menu reset-ul font-size-15 lh-2 ltr-sp-025 font-weight-medium">
<li>
<a href="#"><i class="fa fa-angle-right mr-2"></i>Vertical Cartoners</a>
</li>
<li>
<a href="#"><i class="fa fa-angle-right mr-2"></i>Horizontal Cartoners</a>
</li>
<li>
<a href="#"><i class="fa fa-angle-right mr-2"></i>Pre Made Pouch Machines</a>
</li>
<li>
<a href="#"><i class="fa fa-angle-right mr-2"></i>Case Packers</a>
</li>
<li>
<a href="#"><i class="fa fa-angle-right mr-2"></i>Rigid Container Fillers</a>
</li>
<li>
<a href="#"><i class="fa fa-angle-right mr-2"></i>Carton Sleeve Wrappers</a>
</li>
</ul>
</div><!-- /.megamenu-column-inner -->
</div><!-- /.megamenu-column -->
<div class="megamenu-column col-md-3 bg-cover bg-center" data-responsive-bg="true">
<img class="invisible" src="./img/equipment/vertical-cartoner.jpg" alt="Megamenu Image">
</div><!-- /.megamenu-column -->
</div><!-- /.row ld-row -->
</div><!-- /.container ld-container -->
</div><!-- /.vc_row -->
</div><!-- /.megamenu-container -->
</li>
</ul>
</li>
이런 종류의 스크립팅을 사용합니다.
$(document).ready(function(){
$('#op1').hover(function(){
$('#image').css('background-image','url("https://via.placeholder.com/150.png?text=op1")')
});
$('#op2').hover(function(){
$('#image').css('background-image','url("https://via.placeholder.com/150.png?text=op2")')
});
$('#op3').hover(function(){
$('#image').css('background-image','url("https://via.placeholder.com/150.png?text=op3")')
});
});#image{
background-image: url("https://via.placeholder.com/150");
border: 1px solid black;
width: 150px;
height: 150px;
}
#op1, #op2, #op3{
padding: 5px;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image"></div>
<div id="op1">hover for op1</div>
<div id="op2">hover for op2</div>
<div id="op3">hover for op3</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다