Question

我有问题。我不知道如何解决这个问题

HTML代码：

<div class="image">
 <a href="#">
       <img src="images/image1.jpg" id="mainimg-1">
  </a>
</div>

      <div class="otherthumbnailcontainer">
        <div class="thumbnailimages" id="thumbnailcont-1">
            <img src="images/image1.jpg" id="thumbnail-1" onMouseOver="changeimage('images/image1.jpg','mainimg-1','thumbnail-1','thumbnailcont-1');" class="thumbsmallimg selectedthumb">

            <img src="images/image2.jpg" id="thumbnail-2" onMouseOver="changeimage('images/image2.jpg','mainimg-1','thumbnail-2','thumbnailcont-1');" class="thumbsmallimg">

            <img src="images/image3.jpg" id="thumbnail-3" onMouseOver="changeimage('images/image3.jpg','mainimg-1','thumbnail-3','thumbnailcont-1');" class="thumbsmallimg">

            <img src="images/image4.jpg" id="thumbnail-4" onMouseOver="changeimage('images/image4.jpg','mainimg-1','thumbnail-4','thumbnailcont-1');" class="thumbsmallimg">  

            <img src="images/image5.jpg" id="thumbnail-5" onMouseOver="changeimage('images/image5.jpg','mainimg-1','thumbnail-5','thumbnailcont-1');" class="thumbsmallimg">  
        </div>
    </div>

这是代码：

function changeimage(thumburl,mainimgid,thumbnailimg,thumbmaindiv)
{
     $('#'+mainimgid).attr("src", thumburl);
    // $('#'+thumbnailimg).add("thumbsmallimg selectedthumb");
     $('#'+thumbnailimg).removeClass("selectedthumb").addClass('thumbsmallimg');
     // $('#'+thumbnailimg).toggleClass("selectedthumb");
}

现在我想在网站页面上做的是用这两个类“thumbsmallimg selectedthumb”完全加载第一个图像但是当鼠标在另一个图像上移动时，“selectedthumb”类将从一个图像切换到另一个图像。

修改 http://jsfiddle.net/nZMpW/点击此链接。它就像一个产品图库，当你将鼠标悬停在下方的图像上时，它会变成一个大图像。但如果你移动另一个图像，它会进入大图像而不是选择，则会选择第一个向下图像。 css这个“：hover”选项仅在鼠标悬停在该图像上但我不想这样做时才起作用

Answer 1

而不是selectthumb，在你的CSS中将这些样式放入.thumbsmallimg：hover {

.thumbsmallimg:hover{
  /* the styles that wrere in class .selectedthumb */
}

Answer 2

删除所有onmouseover事件并在$（document）.ready（）部分中使用此jquery代码

 $(".thumbsmallimg").mouseover(function() {
     $("#mainimg-1").attr("src", this.src);
     $(".selectedthumb").removeClass("selectedthumb");
     $(this).addClass("selectedthumb");    
 });

并且，如果您希望它可以使用多组缩略图/ bigImages，则可以使用data（）属性：

  <img src="http://www.yoono.com/static/yoono_com_v8/img/iphone_yoono.png" id="thumbnail-1"  class="thumbsmallimg selectedthumb" data-big-image="mainimg-1">
  <img src="http://www1.pcmag.com/media/images/302835-apple-iphone-5-sprint.jpg" id="thumbnail-2"  class="thumbsmallimg" data-big-image="mainimg-1">
 .....

并在jqQuery中：

$(".thumbsmallimg").mouseover(function() {
    $("#" + $(this).data("big-image")).attr("src", this.src);
    $(".selectedthumb").removeClass("selectedthumb");
    $(this).addClass("selectedthumb");    
});

这是您的Fiddle再次更新

如何从Jquery更改Class，但从另一个对象中删除该类

2 个答案: