How to change the text-color of element after clicking it?


Tags: html5,css3

Problem :

How to change the text-color of element after clicking it? please suggest CSS for summary on hover, and summary on visited. I want to change the text-color in summary element.



Solution :

HTML:

<summary>Sample text</summary>

CSS:

This will change color on hover

summary:hover{
    color:red;
}

This will change color on click

summary:active{
    color:red;
}

Basically ,when the summary is clicked use :active , when it is hovered use :hover

So the :active and :hover are pseudo classes.

You can check out their documentation here:

1. :active https://developer.mozilla.org/en-US/docs/Web/CSS/:active

2. :hover https://developer.mozilla.org/en-US/docs/Web/CSS/:hover


    CSS Howto..

    How to make this series of rules into a mixin?

    How to make text-overflow with ellipsis work with long strings that have no breaks

    How to select non-header cells with css

    How to get this partially diagonal shape from an image in CSS

    How do I selectively stack columns with twitter bootstrap

    How to include 3 background images in a single css?

    How to make an entire div clickable with CSS [closed]

    How to completely remove borders from HTML table

    How to display the :after content outside element

    How to apply css to link in dropdown table using arrow keys and hover event?

    How to select children in CSS

    ExtJS 4.2 How to set grid filter height when header text is wrapped?

    How to make both text and image change on rollover via CSS?

    How to add different CSS to the same HTML tags?

    How to change css style by using Unicode Hexadecimal

    How to show/hide delete button with CSS?

    How to dynamically apply nested base languages in textarea?

    how to hide an image on css active in IE

    How to create an href that opens a div on screen? [closed]

    How to make the long text to fit inside a small div?

    How can I make a CSS Wrapper adjust height automatically?

    How can I transition height: 0; to height: auto; using CSS?

    How do I put a scrollable div next to a non-scrollable div using CSS?

    How to Align text with respect to image css

    How can i make 3 independently scrollable columns

    How to order a css file?

    how to change glyph height without changing the font-size?

    How to make CSS animation not reverse after finishing? Example inside

    How do I scroll to s specific location in an iframe?

    How do I access font features in CSS?