![](/img/trans.png)
[英]Change Text when hovering over image, text is in a different location then image
[英]How to change menu image when hovering over different links?
首先让我说我是新手。 我有一些来自我正在使用的模板的代码。 在下拉菜单上有一个指向其他页面的链接列表,旁边是一个图像。 当您将鼠标悬停在每个链接上时,我需要添加什么才能将图像更改为另一个图像?
这是代码。
<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>
在你的 css 样式表中找到这个
.megamenu .link-icon {
...
}
在它之后添加下一行以获得鼠标悬停效果。 对不起点。 由于您当前的 css 未知,因此无法提供完整的解决方案。
.megamenu > a:hover .link-icon {
...
}
我会为这种事情使用脚本
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.