LinuxQuestions.org

LinuxQuestions.org (/questions/)
-   Programming (https://www.linuxquestions.org/questions/programming-9/)
-   -   Is it possible in html/css to make a tag active or inactive? (https://www.linuxquestions.org/questions/programming-9/is-it-possible-in-html-css-to-make-a-tag-active-or-inactive-4175648266/)

rblampain 02-13-2019 07:19 PM

Is it possible in html/css to make a tag active or inactive?
 
For example is it possible at all to make the following line
Code:

<li><h3>Some text</h3></li>
render like:
Code:

<li>Some text</li>
or
Code:

<h3>Some text</h3>
at the click of a mouse or onmouseover?

Thank you for your help.

dugan 02-13-2019 07:32 PM

Yes. You add an event handler and put some DOM manipulation code in it.

hydrurga 02-13-2019 07:36 PM

If you use Javascript/JQuery, yes.

https://www.digitalocean.com/communi...ion-to-the-dom

https://stackoverflow.com/questions/...s-using-jquery

Also, for CSS hacks, see here:

https://tympanus.net/codrops/2012/12...-click-events/

and https://stackoverflow.com/questions/...-effect-in-css

Disclaimer: I haven't done any web development for a while so html5/css may well support clicks now and I just don't know about it.

michaelk 02-13-2019 09:00 PM

Mouse over should be doable using CSS :hover selector.

https://www.w3schools.com/cssref/sel_hover.asp

ondoho 02-14-2019 01:33 PM

it should be possible with CSS only, no javascript required.
the :hover selector is almost trivial, but it can also be achieved for mouseclicks... been a while since i coded a clickable menu hamburger which isn't too far from what you want...

Turbocapitalist 02-14-2019 01:49 PM

CSS all the way. JS is not a good idea for this, or for much else.

The :hover selector, as mentioned already, is what you want. There are also ways to deal with clicks though that is a bit of a hack. Here is one example:

https://www.w3.org/Style/Examples/007/folding.en.html

and another

https://alligator.io/css/collapsible/

I think to get what you want you'll have to combine pieces from two or three methods.

Samsonite2010 02-15-2019 04:45 AM

Maybe experiment with both CSS and Javascript. I prefer not to use JS if I can, but then again, if you are using any Javascript at all, no harm in exploring. There are plenty of nice UI libraries too for inspiration or actual use.


All times are GMT -5. The time now is 12:57 PM.