悬停菜单项上的 jQuery 更改主图像

Question

在this site 我们有主菜单。我想在 第三列中更改“主图像”的“悬停”菜单项。 所有者正在使用插件来构建菜单。我坚持这个结构。但我可以给 CSS 类名：links1、links2 等（拆分列）见下文：

<div class="grid-column grid-column3 links1 ">
  <ul class="level1">
    <li class="imageLink ">Link 1</li>
    <li class="imageLink ">Link 2</li>
    <li class="imageLink ">Link 3</li>
 </ul>
</div>

第三列Main-image的结构是：

<div id="imageBox">
  <img class="imageChangeDefault">
</div>

是否可以使用 jQuery .attr('src') 更改 图像框 中的图像，具体如何？我真的希望有一个解决方案？

非常感谢！

Answer 1

你的 html 必须是这样的

<ul class="level1">
    <li class="imageLink ">
        <a title="Babyboek" href="http://belmondo-dev01.e-sites.nl/babyboek.html" target="_self" data-bgimage="url to the image">
            <i class=""></i><span>Babyboek</span>
        </a>
    </li>
    <li class="imageLink ">
        <a title="Collegaboek" href="http://belmondo-dev01.e-sites.nl/collegaboek.html" target="_self" data-bgimage="url to the image">
            <span>Collegaboek</span>
        </a>
    </li>
    <li class="imageLink ">
        <a title="Kookboek" href="http://belmondo-dev01.e-sites.nl/kookboek.html" target="_self" data-bgimage="url to the image">
            <span>Kookboek</span>
        </a>
    </li>
    <li class="imageLink ">
        <a title="Liefdesboek" href="http://belmondo-dev01.e-sites.nl/liefdesboek.html" target="_self" data-bgimage="url to the image">
            <span>Liefdesboek</span>
        </a>
    </li>
    <li class="blue ">
        <a title="Bekijk alle boeken" href="http://belmondo-dev01.e-sites.nl/boeken.html" target="_self" data-bgimage="url to the image">
            <span>Bekijk alle boeken</span>
        </a>
    </li>
</ul>

我在anchor 标签中添加了一个data-bgimage 属性，它应该有相应的背景图片。

添加正确的html后添加以下脚本

没有渐变效果

jQuery(document).ready(function(){
    jQuery('.level1 li').mouseenter(function(){
        $this = jQuery(this);
        if(typeof $this.find('img').attr('src') != "undefined"){
            $this.parent().parent().parent().find('.imageChange').css('background','url('+$this.find('img').attr('src')+')').css('background-repeat','no-repeat').css('width','inherit').css('height','inherit').css('background-size','100% 100%');
        }
    });
})

有淡化效果

jQuery(document).ready(function(){
    jQuery('.level1 li').mouseenter(function(){
        var $this = jQuery(this);
        if(typeof $this.find('img').attr('src') != "undefined"){
            var imgelem = $this.parent().parent().parent().find('.imageChange');
            imgelem.hide();
            imgelem.css('background','url('+$this.find('img').attr('src')+')')
                .css('background-repeat','no-repeat')
                .css('width','inherit')
                .css('height','inherit')
                .css('background-size','100% 100%');
            imgelem.fadeIn(500)
        }
    }).mouseleave(function(){
        var $this = jQuery(this);
        $this.parent().parent().parent().find('.imageChange').hide();
    });
})

Answer 2

只需将data-* 属性与要显示的所需图像的src 附加到LI 元素：

<li data-thumb="thumbs/babyboek.jpg" class="imageLink ">

与 jQuery 相比：

$('[data-thumb]').mouseenter(function() {
   var thumb = $(this).data('thumb');
   $(this).closest(".parent").find(".imageChangeDefault").attr('src', thumb);
});

（P.S. 没有时间进一步查看，但请确保避免重复 ID imageBox）

Answer 3

是的，你可以用 jQuery 做到这一点。

// for image link...
$('.imageLink').hover(function(){
      //change image for parent...here
      $(this).parent().attr('src', 'new-image');
 }, function(){

      // do something in hover out if needed...
 });

 // for imageBox ...use this:

$('#imageBox').hover(function(){
     $(this).children(':eq(0)').attr('src', 'new-image');
}) ;