Javascript 与图像值相对应的悬停效果_Javascript_Jquery_Image_Css

Javascript 与图像值相对应的悬停效果

javascript jquery image css

Javascript 与图像值相对应的悬停效果,javascript,jquery,image,css,Javascript,Jquery,Image,Css,我有5张图片。当我将鼠标悬停在第5张图像上时，必须更改前5张图像的背景色。当我将鼠标悬停在第4张图像上时，必须更改前4张图像的背景色，同样，对于第3张图像的前3张、第2张图像的前2张、第1张图像的前1张背景色也必须更改。如何编写CSS $(document).ready(function(){ $("#images img").click(function(){ var va = $(this).attr("name"); if(va=='5'){ $('.t

我有5张图片。当我将鼠标悬停在第5张图像上时，必须更改前5张图像的背景色。当我将鼠标悬停在第4张图像上时，必须更改前4张图像的背景色，同样，对于第3张图像的前3张、第2张图像的前2张、第1张图像的前1张背景色也必须更改。如何编写CSS

$(document).ready(function(){
  $("#images img").click(function(){
    var va = $(this).attr("name");
    if(va=='5'){
        $('.two,.three,.four,.one,.five').addClass('active');
    }else if(va=='4'){
        $('.two,.three,.four,.one').addClass('active');
        $('.five').removeClass('active');
    }else if(va=='3'){
        $('.two,.three,.one').addClass('active');
        $('.four,.five').removeClass('active');
    }else if(va=='2'){
        $('.two,.one').addClass('active');
        $('.three,.four,.five').removeClass('active');
    }else if(va=='1'){
        $('.one').addClass('active');
        $('.two,.three,.four,.five').removeClass('active');
    }
    $("#result_value").text(va);
});
$("#images img").mouseover(function(){
    var va = $(this).attr("name");
    if(va=='5'){
        $('.two,.three,.four,.one,.five').addClass('active');
    }else if(va=='4'){
        $('.two,.three,.four,.one').addClass('active');
        $('.five').removeClass('active');
    }else if(va=='3'){
        $('.two,.three,.one').addClass('active');
        $('.four,.five').removeClass('active');
    }else if(va=='2'){
        $('.two,.one').addClass('active');
        $('.three,.four,.five').removeClass('active');
    }else if(va=='1'){
        $('.one').addClass('active');
        $('.two,.three,.four,.five').removeClass('active');
    }
    });
    $("#images img").mouseleave(function(){
        $('.one,.two,.three,.four,.five').removeClass('active');
     });
   });
   <style>
     .clr:hover{
      background-color:#FFD700;
     }

     .active{
  background-color:#FFD700;
     }
   </style>
   </head>

   <body>
    <div class="images" id="images">
     <form name="imagediv" id="imagediv" method="post">
      <img src="star1.png" class="one" alt="Number 1" name="1" width="42" height="42">
      <img src="star2.png" class="two" alt="Number 1" name="2" width="42" height="42">
      <img src="star3.png" class="three" alt="Number 1" name="3" width="42" height="42">
      <img src="star4.png" class="four" alt="Number 1" name="4" width="42" height="42">
      <img src="star5.png" class="five" alt="Number 1" name="5" width="42" height="42">

     </form>
    </div>
     <div class="result_value" id="result_value" ></div>
    </body>

$（文档）.ready（函数（）{
$（“#图像img”）。单击（函数（）{
var va=$（this.attr（“名称”）；
如果（va='5'）{
$（'.2、.3、.4、.1、.5'）.addClass（'active'）；
}else如果（va='4'）{
$（'.2、.3、.4、.1'）.addClass（'active'）；
$（'.five'）.removeClass（'active'）；
}否则如果（va='3'）{
$（'.2、.3、.1'）.addClass（'active'）；
$（'.four，.five'）.removeClass（'active'）；
}else如果（va='2'）{
$（'.two，.one'）.addClass（'active'）；
$（'3、.4、.5'）。removeClass（'active'）；
}else如果（va='1'）{
$（'.one'）.addClass（'active'）；
$（'.2、.3、.4、.5'）.removeClass（'active'）；
}
$（“结果值”）。文本（va）；
});
$（“#图像img”）.mouseover（函数（）{
var va=$（this.attr（“名称”）；
如果（va='5'）{
$（'.2、.3、.4、.1、.5'）.addClass（'active'）；
}else如果（va='4'）{
$（'.2、.3、.4、.1'）.addClass（'active'）；
$（'.five'）.removeClass（'active'）；
}否则如果（va='3'）{
$（'.2、.3、.1'）.addClass（'active'）；
$（'.four，.five'）.removeClass（'active'）；
}else如果（va='2'）{
$（'.two，.one'）.addClass（'active'）；
$（'3、.4、.5'）。removeClass（'active'）；
}else如果（va='1'）{
$（'.one'）.addClass（'active'）；
$（'.2、.3、.4、.5'）.removeClass（'active'）；
}
});
$（“#图像img”）.mouseleave（函数（）{
$（'.1、.2、.3、.4、.5'）。removeClass（'active'）；
});
});
.clr:悬停{
背景色：#FFD700；
}
.主动{
背景色：#FFD700；
}

对于click和mousehover，我已经编写了保存逻辑，因此对于click，添加的类不能被删除；对于mousehover，在Mousehout之后必须删除该类，但该类不能被删除；对于这个，我使用了Mousehout，但是这个Mousehout用于image类，这个Mousehout也用于click，而对于click，不能在mouseout上删除添加的类，并且在a

上删除mousehover的背景色，您可以使用

nextAll（）

和

prevAll（）

使其看起来简单。您需要在单击事件时解除mouseout事件的绑定

$(document).ready(function () {
    var index;
    $("#images img").click(function () {
        var va = $(this).attr("name");
        $(this).addClass("active").prevAll().addClass("active");
        $(this).nextAll("img").removeClass('active');
        index = $("#images img").index(this);
        $("#result_value").text(va);       
    });
    $("#images img").mouseover(function () {
        var va = $(this).attr("name");
 $(this).addClass("active").prevAll("img").addClass('active');
        $(this).nextAll("img").removeClass('active');

    });
    $("#images img").mouseout(function () {
        $("#images img").removeClass('active');
        if(index) {
              $("#images img").eq(index).addClass("active").prevAll("img").addClass("active");
             $("#images img").eq(index+1).removeClass("active");

        }
    });
});

这项工作：

<img src="star1.png" class="one s1" alt="Number 1" name="1" width="42" height="42">
<img src="star2.png" class="two s2" alt="Number 1" name="2" width="42" height="42">
<img src="star3.png" class="three s3" alt="Number 1" name="3" width="42" height="42">
<img src="star4.png" class="four s4" alt="Number 1" name="4" width="42" height="42">
<img src="star5.png" class="five s5" alt="Number 1" name="5" width="42" height="42">


$("#images img").click(function(){
    var va = $(this).attr("name");
    $(this).prevAll().addClass("active");
    $("#result_value").text(va);
});

$("#images img").mouseover(function(){
    var va = $(this).attr("name");
    $(this).addClass("active").prevAll("img").addClass('active');
    $(this).nextAll("img").removeClass('active');
});

$("#images img").mouseleave(function(){
    var va = 1 * $("#result_value").text();

    if(va > 0) {
        $('.s' + va).addClass('active').prevAll("img").addClass('active');        
        $('.s' + va).nextAll().removeClass('active');
    }
    else {
        $("#images img").removeClass('active');
    }
});


$（“#图像img”）。单击（函数（）{
var va=$（this.attr（“名称”）；
$（this.prevAll（）.addClass（“活动”）；
$（“结果值”）。文本（va）；
});
$（“#图像img”）.mouseover（函数（）{
var va=$（this.attr（“名称”）；
$（this.addClass（“active”）.prevAll（“img”）.addClass（“active”）；
$（this.nextAll（“img”）.removeClass（“active”）；
});
$（“#图像img”）.mouseleave（函数（）{
var va=1*$（“#结果_值”）.text（）；
如果（va>0）{
$（'.s'+va）.addClass（'active'）.prevAll（'img'）.addClass（'active'）；
$（'.s'+va）.nextAll（）.removeClass（'active'）；
}
否则{
$（“#images img”）.removeClass（'active'）；
}
});

尝试将所有代码切换到“s1，s2，…”而不是“一，二…”。以编程方式构建这些类名要容易得多，正如您所见，您需要这样做。另外，不要在表单输入以外的任何内容上使用

名称

。这是非标准的HTML。可能会切换到HTML5和

data-

attributes类

我不确定如何在CSS中完成您想要做的事情，但我可以很容易地想到如何在JS中完成。您可以在CSS中完成……这就是为什么我要问……您的html看起来如何。这是ul..li…还是div？我已经编辑并编写了我所做的工作，并清楚地解释了我的要求。这里是一个保存“点击”值的地方：仅使用CSS（状态保存部分）是不可行的。什么是难题？我还是不明白这个问题。最初的代码虽然不好，但仍然有效。我从问题中了解到，OP中有mouseenter、mouseleave和click的事件。但是当OP点击时，甚至mouseleave事件也会被触发。例如：单击时，OP希望使活动类出现在那里。但是由于在mouseLeave事件中删除了活动类，OP希望阻止它。这就是我通过unbind&bind:）@mohamedrians所做的——使用您的代码，我可以减少代码的行数。但是我的问题没有解决。我在查询中提到的问题与您编写的代码相同。你能在你的代码中解决这个问题吗。Sergiu Paraschiv在评论中给出的答案非常好，但是你能在上面的代码中显示出来吗。@mohamedrians你在哪里写的绑定和解除绑定？我在您的代码中找不到它，您将在click事件中找到.off&settimeout