On Hover On Click

[therockstar]

Alright, guys i am in bit of situation right now.

Any idea how to achieve this result http://imgur.com/a/w9aXr

On Hover change the background color on Click show detail info.

I know on hover changing background color is easy I couldn’t figure it how to show the info on click also if one info box is open another should be close.

Regards,
Romi

[Paulie_D]

You can’t do this with CSS…you need javascript/Jquery.

“click”s require JS….that’s the point.

[therockstar]

@Paulie_D do you have snippet or examples for it I’m fine using Javascript

Thanks mate

[rkieru]

The example I’m linking to uses jQuery but it’s a pretty simple matter of toggling the state of two nested items: https://codepen.io/rkieru/pen/rzZYPW

So when you hover over the wrapper element (in my example .box) you have the first item just do its normal CSS :hover effect. You tie a click event via JavaScript/jQuery that sets the primary child element (.info) to hidden and the secondary child element (.details) to visible.

[therockstar]

@rkieru Many thanks, mate.

Gonna use your method it’s what I’m looking for. Appreciated your reply and your code snippet.

Cheers!

[Author]

Posts