條件變化（如果/那麼）基於jQuery中

Question

CSS屬性我有幾個圖片：

<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

不要在CSS中使用JavaScript。

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; 
}