Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highlight a div on mouse down using CSS

Tags:

css

Is it possible to highlight a div (change it's background color) with a mouse down event and unhighlight it when the mouse button goes up, only using CSS?

like image 478
Johann Avatar asked Apr 17 '13 13:04

Johann


People also ask

How do you highlight a box in CSS?

How Do I Highlight Text In CSS? To Highlight text in HTML you have to use an inline element such as the <span> element and apply a specific background style on it. This will create the highlighting effect, which you can tweak in many different ways to create different looks.

How to change the background color of a div on mouse move Over using JavaScript?

How to Change Background Color of a Div on Mouse Move Over using JavaScript ? The background color of the div box can be easily changed using HTML, CSS, and Javascript. We will use the querySelector() and addEventListener() method to select the element and then apply some math logic to change its background color.

How do you select all highlighted elements inside this div block?

To select all text inside an element such as DIV, we can simply use JavaScript document. createRange() method to create a range, and than using range. selectNodeContents() we can set node range (start and end), after which use selection. addRange() to select the range of the element.

How to change div background color dynamically using JavaScript?

JavaScript – Change the Background Color of Div To change the background color of a div using JavaScript, get reference to the element, and assign required color value to the element. style. backgroundColor property.


2 Answers

I'm not sure how widely supported it is, but this seems to work (in chrome FF and Safari) at least

http://jsfiddle.net/sQU2V/

  <style>div:active{background:red}</style>
  <div>test</div>
like image 63
TommyBs Avatar answered Oct 23 '22 16:10

TommyBs


Try using the pseudo-class :active:

yourselector:active {
    background: #F00; // Or whatever
}

Demo: http://jsfiddle.net/darkajax/JEy9f/

According to MDN it should be compatible with Chrome, Firefox and IE 8+ among others...

like image 6
DarkAjax Avatar answered Oct 23 '22 17:10

DarkAjax