Changing CSS onhover to onclick

Question

I'm using the following CSS:

.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.main-navigation li {
    float: left;
    position: relative;
}
.main-navigation a {
    display: block;
    text-decoration: none;
}
.main-navigation ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    position: absolute;
    top: 1.5em;
    left: 0;
    z-index: 99999;
}
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}
.main-navigation ul ul a {
    width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
    display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}

/* Small menu */
.menu-toggle {
    cursor: pointer;
}
.main-small-navigation .menu {
    display: none;
}

to control a list-based, multi-level, navigation system, the HTML for which which looks something like this: https://gist.github.com/2851105.

What I'd like to know is, how can I change the hover event that makes the menu appear into a click event? Can this even be done in CSS alone, or so I need to introduce some javascript?

Thank you.

Joel Etherton · Accepted Answer · 2012-06-01 10:51:15Z

4

The best you can hope for in css as far as a "click" event goes would be to style something using the a:active attribute. This will be called when a particular link is clicked, but it won't have the capability to do what you're looking for. It will only be able to apply visual style to the element in question.

CSS is purely a styling language. You will need JavaScript to achieve anything more.

answered Jun 1, 2012 at 10:51

Joel Etherton

37.5k10 gold badges92 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mingos · Accepted Answer · 2012-06-01 10:49:14Z

1

This cannot be done using CSS alone, I'm afraid. You will need to use JavaScript here.

answered Jun 1, 2012 at 10:49

mingos

24.7k12 gold badges73 silver badges108 bronze badges

Comments

Federico Giust · Accepted Answer · 2012-06-01 10:51:39Z

1

You need to use JavaScript or jQuery to control click events. It cannot be done using CSS.

jQuery .click()

answered Jun 1, 2012 at 10:51

Federico Giust

1,7934 gold badges22 silver badges48 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:49:10Z

0

You should be able to adapt the answers to the following question to fit your needs

CSS: set color for selected row in a table

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Jun 1, 2012 at 10:52

Craig Swing

8,1622 gold badges32 silver badges43 bronze badges

Collectives™ on Stack Overflow

Changing CSS onhover to onclick

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related