Wie macht man die Hover Image Taste?

Question

Ich muss ein Bild machen, das ist Graustufen und beim Hover, es gewinnt Farbe, und wenn ich es anklicke, bleibt die Schaltfläche hervorgehoben, ich habe den Hover-Teil heraus gedacht, wie kann ich es so machen, dass es hervorgehoben bleibt?

Answer 1

Wenn das Bild auch die 'Schaltfläche' ist, die hervorgehoben bleiben soll, können Sie die Bilder oder Schaltflächen CSS durch JQuery aktualisieren, wenn es gedrückt wird.

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

Versuchen Sie, Ihre Fragen ein wenig konkreter zu machen und zu erklären.

Answer 2

können Sie eine hightlight css Datei (oder ein Stück Code) für den Tag, class="active", die aktiv ist das Highlight Stil schreiben, wenn Sie das Bild klicken, wird das Ereignis onclick kann Attribut class das Ziel-Tag des ändern. Oder verwenden Sie JQuery können Sie $("#aimNode").click(function(){$(this.toggleClass("active"))}).

Answer 3

Versuchen filter mit:

$('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