Question

我有几张图片：

<img class="photo" src="{{ img.url_small }} />
<img class="photo" src="{{ img.url_small }} />
<img class="photo" src="{{ img.url_small }} />

当用户将鼠标悬停在图片上或点击图片时，我正在尝试更改边框颜色：

$(".photo").click(function() {
   $(".photo").css({"background":"white"});
   $(this).css({"background":"blue"});
});

$(".photo").mouseenter(function() {
   $(this).css({"background":"green"});
}).mouseleave(function() {
   $(this).css({"background":"white"});
});

（每个图像周围都有一个白色边距，因此背景的变化会改变边框）

问题是当用户点击图像时，它变为蓝色，但是当鼠标从图像移开时，边框变为白色。

我尝试了一些条件：

$(".photo").mouseenter(function() {
   if($(this).css("background") != "blue") {
      $(this).css({"background":"green"});
   }
}).mouseleave(function() {
   if($(this).css("background") != "blue") {
      $(this).css({"background":"white"});
   }
});

但是边框仍然从蓝色变回白色。如何保持边框蓝色？有没有更有效的方法呢？

Answer 1

不要使用javascript来完成CSS中的操作。

CSS会处理简单的hover样式更改，然后只为click添加一个类。

如果您需要支持悬停的IE6，我会将<img>包裹在<a>标记中，然后将其作为背景。

直播示例： http://jsbin.com/ogasa3

.photo {
    background:white;
}
.photo:hover {
    background:green;
}
.selected {
    background:blue;
}
.selected:hover {
    background:blue;
}

的jQuery

$(".photo").click(function() {
    $(".photo.selected").removeClass('selected');
    $(this).addClass('selected');
});

Answer 2

.hover是进行mouseenter，mouseleave的更有效方式。

你真正需要做的是点击图像时添加一个新类，如下所示：

$(".photo").click(function() {
   $(".photo").removeClass('currentImage');
   $(this).addClass('currentImage');
});

$(".photo").hover(function() {
     jQuery(this).addClass('hoverImage');
}, function() {
     jQuery(this).removeClass('hoverImage');
});

确保currentImage的样式符合您的要求：

.currentImage {
background:blue;
}
.hoverImage {
background:green;
}

基于jquery中的css属性的条件更改（if / then）

2 个答案: