如何製作懸停圖片按鈕？

Question

我需要製作一個圖像，這是灰度和懸停，它獲得的顏色，當我點擊它，該按鈕仍然突出顯示，我已經計算懸停部分了，我怎麼能使它保持突出顯示？

Answer 1

如果圖像也是需要保持突出顯示的「按鈕」，則可以通過JQuery在按下時更新圖像或按鈕CSS。

$(function() { 
    $('#id_of_your_image_element_here').click(function() { 
    $(this).css('background', 'red'); 
    }); 
}); 

試着讓你的問題更具體一點，並解釋。

Answer 2

你可以寫一個hightlight css文件（或一段代碼）的標籤，class="active"，活動是高亮風格，當你點擊圖片，事件onclick可以改變class目的標籤的屬性。或者使用JQuery即可$("#aimNode").click(function(){$(this.toggleClass("active"))})。

Answer 3

嘗試使用filter：

$('button').click(function() { 
 
    $(this).css({'-webkit-filter': 'grayscale(0)', 
 
    \t \t \t \t \t \t \t 'filter': 'grayscale(0)'}); 
 
});

button { 
 
    
 
    -webkit-filter: grayscale(1); 
 
    filter: grayscale(1); 
 
    transition: 1s; 
 
    
 
    /* settings */ 
 
    background-image: url(http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png); 
 
    width: 512px; 
 
    height: 512px; 
 
    
 
    /* cosmetics */ 
 
    border: 0; 
 
    border-radius: 5px; 
 
    margin: 1em; 
 
    outline: 0; 
 
} 
 

 
button:hover { 
 
    -webkit-filter: grayscale(0); 
 
    filter: grayscale(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>click me</button>

JSFiddle