Forums

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

Home Forums CSS [Solved] show/hide overlapping images with click event

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #156514
    liza_rd
    Participant

    i have 2 overlapping imgs (2 moons) only the first is visible, the second is display:none. Is it possible on click to make the first invisible and the second visible using only css? here is the example:

    http://cdpn.io/qvzAw

    the images are luna1 & luna2, i’m trying to make luna2 visible and luna 1 invisible whenever** luna1** is clicked

    #156822
    Alex
    Participant

    Your best bet would be to just use Javascript, but you could do something like this:

    HTML:

        <div>
        <a class="a"href="#">Hey</a>
        <a class="b" href="#">Howdy</a>
        </div>
    

    CSS:

    div {position:relative;}
    .a{position:absolute;}
    .b{position:absolute; visibility:hidden;}
    .a:active {visibility:hidden;}
    .a:active + .b {visibility:visible;}
    

    Although I’m not sure if that will produce the results you want, you’d have to hold the mouse button down.

    #157313
    liza_rd
    Participant

    @Alex

    thank u for your answer Alex, I couldn’t make it work but I’ll have it in mind next time I want something like this :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.