Forums

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

Home Forums CSS How to use onclick attribute instead of Hover in CSS without jquery

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #181259
    Jothiboss
    Participant

    I’m using these css codes for panning an image towards right on hover

    <i> .vertpan img { margin-left: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; }

    .vertpan img:hover { margin-left: 200px; }
    </i>

    but I need to pan the image after only click that.

    suggest ASAP..

    Thanks in Advance

    #181260
    nixnerd
    Participant

    CSS doesn’t handle click events. You will need JS/jQuery. CSS has an :active pseudo selector… but that only does something when the user actually has the mouse button down.

    #181262
    Jothiboss
    Participant

    okay..

    Then, can you help me with JS coding for that…??

    #181264
    nixnerd
    Participant

    This isn’t a coding service. Perhaps you could try it yourself and post back if you run into problems? Try making a Codepen.

    #181266
    __
    Participant

    If you don’t know were to start, check out developer.mozilla.org for a javascript reference. Start with methods like querySelector and addEventListener.

    How much experience do you have with JS? do you understand the language?

    #260362
    macro6461
    Participant

    Not sure if this is still an issue for you considering its been over three years but I found a bit of a loophole for using animations and active instead of resorting to jquery:

    Context: I am making a coin flipper project where I use javascript and html/css. The functionality works perfectly well but I wanted my image of a coin to actually appear to flip. I used active and it only worked when I held the mouse down. But then, I changed the rotateX to 1440 deg (a lot of spinning) AND I changed the transition in the original element style to a shorter amount of time. Thus more spins were occurring faster in the period of time it took to click. I have the CSS if you follow the link just imagine the submit button as a picture of a quarter):
    https://codepen.io/macro6461/pen/jGrJrg

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