CSS on Mouse Down
Usually I would use :hover, but I want my website to be accessible on touchscreen media too.
I know I can use :active, but as soon as I let go of the mouse button, it goes back to its inactive state.
Effectively I want:
Mouse Down : Div goes green
Mouse Up: Div stays green开发者_如何学C
Mouse Down: Div goes red
Mouse Up: Div stays red
Instead of:
Mouse Down: Div goes green
Mouse Up: Div goes red
Without relying on jQuery:
The :active
pseudo-class is used to apply css to elements while they're being clicked upon.
.button {
color: red;
}
.button:active {
color: green;
}
Here is how to do a pure css toggle 'button' (CSS3 required):
.toggle-button
{
background-color: #FF0000;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.toggle-box:checked + .toggle-button
{
background-color: #00FF00;
}
<input type="checkbox" class="toggle-box" id="toggle-1" />
<label for="toggle-1" class="toggle-button">Click Me</label>
Of course, as always, IE fails at CSS (can't figure out the :checked
pseudo-class), so you're probably better off just using JavaScript.
Use jQuery.
$(function(){
$('#yo-content').click(function() {
$(this).toggleClass('make-me-green');
});
});
CSS:
#yo-content {
background-color: #ff0000;
cursor: pointer;
}
.make-me-green {
background-color: #33ff00 !important;
}
HTML:
<div id="yo-content">Feel free to click</div>
To my knowledge, there is no pure-CSS way of achieving what you effectively want.
But jQuery could come handy there...
// let's suppose your div's (on page load) initial state is red (#F00),
// and this flag will stand for it
var initialState = true; // setup a global state flag
$("#foo").mousedown( function() { // on mousedown
$(this).css("background-color", intialState ? "#0F0" : "#F00"); // toggle bgColor
initialState = !initialState; // toggle flag
});
Instead of setting css properties, you could set/add/remove classnames if you'd like the presentational aspects to stay as CSS-centric as possible (which is a decent perspective).
精彩评论