当鼠标悬停在不同的链接上时如何改变菜单图像？

Question

首先，我要说的是我对此还是个新手。我有一些代码来自我正在使用的模板。在下拉菜单上有一个指向其他页面的链接列表，它旁边是一个图像。当您将鼠标悬停在每个链接上时，我需要添加什么才能使图像更改为另一个图像？

下面是代码。

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

Answer 1

我会使用脚本来处理这类事情

​

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

​

Answer 2

在你的css样式表中找到这个

.megamenu .link-icon {
  ...
}

紧跟其后添加下一行，以获得鼠标悬停效果。很抱歉弄错了点。由于您当前的css是未知的，所以不可能给出完整的解决方案。

.megamenu > a:hover .link-icon {
  ...
}