Question

我正在努力解决两个JQuery问题。我有以下HTML结构：

    <div class="mouse-effect">
        <p>
        <a class="auto-01" href="#">Image 1</a><br>
        <a class="auto-02" href="#">Image 2</a><br>
        <a class="auto-03" href="#">Image 3</a><br>
        <a class="auto-04" href="#">Image 4</a>
        </p>
    </div>
   <div class="automotive">      
        <img class="auto-img" src="auto-00.png">
   </div>

它应该做什么：鼠标输入/离开：

在鼠标上输入：将图像替换为“auto-00.png” “a”类中的相应图像，例如“自动01.png” 。 1B。将链接颜色变为红色。
鼠标离开时：恢复图像“auto-00.png”。 2B。有可能将链接颜色恢复为默认值。

自动悬停：

一次直播：自动循环所有“a”，假装鼠标进入，鼠标离开。

我想出来读取src-attributes（（'class'）和（'src'））并更改它。

但我不知道，如何将它变成一个函数以及如何调用它。

我的想法是这样的：

$.fn.loop = function(startimage,div) {
    var newimage = $(this).attr('class'); //class from <a>
    var src = $(div); // <img "auto-img">
    var target = src.attr('src').replace(startimage,newimage);
    var link = $(this); // <a>

    link.css("color","red"); 
    src.fadeOut(200,function(){
     src.attr('src', target).on('load', function(){
        src.fadeIn(200);
        link.wait(600).css("color","");
        });
    });
    startimage=newimage;   

};

然后用：

$("div.mouse-effect p a").loop("auto-00",".auto-img");

这是循环的示例。

有人能指出我正确的方向如何实现我的目标吗？

感谢。

Answer 1

我正在寻找这样的事情：

$('.mouse-effect p a').mouseenter(function() {
  className = $(this).attr('class');

  replaceImg = '<img class="auto-img" src="' + className  + '.png">'

  $('.auto-img').replaceWith(replaceImg );
  $(this).css("color","red");
}).mouseleave(function() {
  $('.auto-img').replaceWith('<img class="auto-img" src="auto-00.png">' );
  $(this).css("color","black");
});

让我知道它是否有效。

修改：

正如下面提到的Smoky所提到的另一个更好的方法是：

$('.mouse-effect p a').mouseenter(function() {
  className = $(this).attr('class');

  $('.auto-img').attr('src',className+'.png');
  $(this).css("color","red");
}).mouseleave(function() {
  $('.auto-img').attr('src','auto-00.png');
  $(this).css("color","black");
});

JQuery：在链接和循环上的mouseenter / mouseleave上更改DIV中的图像

1 个答案: