悬停效果对应于图像的值

hover effect respective to the value of image

本文关键字：图像 于图像 悬停      更新时间：2023-09-26

我有5张图片。当我将悬停在第5张图片上时，前5张图片的背景颜色必须改变。当我将鼠标悬停在第4张图片上时，前4张图片的背景颜色必须改变，同样，第3张图片的背景颜色必须改变，第2张图片的背景颜色必须改变，第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>

对于click和鼠标悬停，我已经编写了保存逻辑，因此对于click，添加的类必须不被删除，对于鼠标悬停，类必须在鼠标悬停后被删除，但类没有被删除，为此我使用了mouseout，但这个mouseout用于图像类，这个mouseout也适用于click，而对于click，添加的类必须不被删除在鼠标悬停时，背景颜色被删除

您可以使用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');
    }
});

试着把你所有的代码都换成"s1, s2，…"而不是"one, two…"。以编程方式构建这些类名要容易得多，正如您所看到的，您需要这样做。也尽量不要使用name的任何其他形式的输入。它是非标准的HTML。也许切换到HTML5和data-属性类。

小提琴来了

相关文章：