Как стилизовать объект, когда пользователь нажимает его

Question

В css для ссылок я могу настроить стиль, как до щелчка пользователя, так и после нажатия пользователем. Но как я могу сделать это для простого текста или объекта, когда пользователь нажимает на этот объект, а затем меняет его цвет. Для примера

<style> 
.object:onmouseclick { 
background-color:green; 
padding:5px; 
} 
</style> 

Что мы должны написать вместо onmouseclick.

Answer 1

Если вы стилизации ссылку вы будете использовать :active или :focus но, как вы используете это на йот элемента, вы должны использовать JQuery добавить класс к клике пункт и применить стиль через этот класс ...

$('.object').click(function() { 
 
    $(this).toggleClass('clicked'); 
 
});

.object { 
 
    background-color: green; 
 
    padding: 5px; 
 
    cursor: pointer; 
 
    width: 300px; 
 
    color: orange; 
 
} 
 
.object.clicked { 
 
    background-color: blue; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="object"> 
 
    <h1>The Mutants Are Revolting</h1> 
 
    <p>Bender?! You stole the atom. That's the ONLY thing about being a slave. I am Singing Wind, Chief of the Martians. Anyhoo, your net-suits will allow you to experience Fry's worm infested bowels as if you were actually wriggling through them.</p> 
 

 
</div>

Answer 2

button:active или button:focus должен сделать трюк.

a { 
 
    background-color: red; 
 
} 
 

 
a:active { 
 
    background-color: #efefef; 
 
}

<a href="">myButton</a>

Answer 3

и необязательно

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.object{ 
 
    background:green; 
 
    padding:5px; 
 
    width: 300px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
input{ 
 
    display: none; 
 
} 
 
label{ 
 
    display: block; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
input:checked ~ label{  
 
    position: absolute; top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #00f url(http://www.pubzi.com/f/sm-chess-horse.png) no-repeat center center; 
 
    border: 1px solid #000; 
 
}

<div class="object"> 
 
    <input type="checkbox" id="c1" name="checkbox" /> 
 
     <label for="c1"></label> 
 
</div>