Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS On Hover On Click

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #259479
    therockstar
    Participant

    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

    #259482
    Paulie_D
    Moderator

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

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

    #259483
    therockstar
    Participant

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

    Thanks mate

    #259488
    rkieru
    Participant

    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.

    #259493
    therockstar
    Participant

    @rkieru Many thanks, mate.

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

    Cheers!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.