Question

在this site，我们有主菜单。＆＃39;在悬停＆＃39;菜单项我想更改主图像＆＃39;在第三列。所有者正在使用插件来构建菜单。我坚持这个结构。但我可以给出一个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>

第三栏中主图像的结构是：

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

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

非常感谢！

Answer 1

只需在LI元素中附加data-*属性，并显示所需图像的src：

<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。没有时间进一步观察，但要确保避免重复的身份证imageBox）

Answer 2

是的，你可以用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');
}) ;

Answer 3

正如你所说，有可能使用jQuery。

.attr('src', 'imageurl.jpg');

但是，如果您在不同菜单中预加载图像，我认为会更好。我看到的主要问题是你有一个带有图片网址的课程。

这里有一个jQuery的丑陋工作示例; http://jsfiddle.net/ft52xa5o/

Answer 4

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

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

添加适当的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();
    });
})

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

4 个答案: