Page 1 of 1

Can :hover e set to :click in CSS?

Posted: Fri Aug 07, 2015 10:08 am
by simonmlewis

Code: Select all

.admin_listproducts ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
width: 130px;
  z-index: 2;
-webkit-box-shadow: 0px 5px 5px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 5px -7px rgba(0,0,0,0.75);
box-shadow: 0px 7px 5px -5px rgba(0,0,0,0.75);
}
I have this part of a CSS Class. It makes a menu popup when hovering over the DIV. But it wont' work for mobile.

So can it be altered so it works on Click instead? the DIV appears over the top of other stuff.

Re: Can :hover e set to :click in CSS?

Posted: Fri Aug 07, 2015 2:43 pm
by Christopher
Using Javscript would be the easiest. Have you tried using :focus or :active in addtion to :hover?

Re: Can :hover e set to :click in CSS?

Posted: Fri Aug 07, 2015 2:46 pm
by simonmlewis
Active wont' work as it only makes it popup when the click is 'down'. So rubbish for mobile friendly.
Would focus work then??

Re: Can :hover e set to :click in CSS?

Posted: Mon Aug 10, 2015 6:47 am
by Celauran
simonmlewis wrote:Active wont' work as it only makes it popup when the click is 'down'. So rubbish for mobile friendly.
I'm not sure I see the problem here. They click the target element, menu pops up. That's pretty standard.

Re: Can :hover e set to :click in CSS?

Posted: Mon Aug 10, 2015 6:52 am
by simonmlewis
Really? So if you want a click on it to make the menu popup... how are you meant to click the links n the menu, if when you "unclick" the mouse, the menu disappears as it's no longer "active"?

Re: Can :hover e set to :click in CSS?

Posted: Mon Aug 10, 2015 6:58 am
by Celauran
Yeah, I was thinking JS .click rather than CSS :active. My mistake.

Re: Can :hover e set to :click in CSS?

Posted: Mon Aug 10, 2015 7:11 am
by simonmlewis
So I don't know how to do that.