Grow your CSS skills. Land your dream job.

Display elements by hovering/clicking link … Help!

  • # September 11, 2012 at 4:16 pm

    I would like it so when the link is hovered over the “hidencontent” is displayed and when the mouse moves off it disappears, and when it is click on “hidencontent” would appear until ANYWHERE on the page is clicked (except for the “hidencontent” div and “morehidencontent” div) …
    here is the code I have but it does not work like I would like … oh and I do have the css code that already has the display to none on the hiden and morehidencontent but is not included …

    hover/click over me!

    Lots of interesting information … hover/click over me for more information!

    Even more interesting information!

    # September 11, 2012 at 5:55 pm

    I don’t think you are supposed to “onclick” an ID. It should be some javascript function.

    # September 11, 2012 at 10:24 pm

    well I know very little javascript and any help on how to accomplish what I was asking would be appreciated … :)

    # September 12, 2012 at 2:58 pm

    check this http://jsfiddle.net/jZzMU/

    # September 12, 2012 at 3:20 pm

    that’s sorta what I am looking for but … I would like for the element to TEMPORARILY be displayed when hovered over (it disappears when the link is not being hovered over) and when it is clicked on for it to stay visible until ANYWHERE on the page is clicked (other the the #hidentcontent and #morehidencontent divs) or the link is then clicked again

    # September 12, 2012 at 4:51 pm

    This work?

    http://jsfiddle.net/VTret/

    # September 13, 2012 at 8:58 pm

    I think this is what I am looking for … but I can not seem to get it to work when I write up the html/css … maybe you could just put it in the form that will work right off of my desktop …

    Thanks so much for your help so far! :D

    # September 13, 2012 at 10:26 pm

    What form would that be?

    # September 13, 2012 at 10:42 pm

    ohh I am sorry I did not communicate that very well … hahaha Let me try again in English … when I copy out the individual sections and insert them into an html file the code does not work right … this is what I did …


    hover/click over me for more information!

    Even more interesting information!




    # September 13, 2012 at 10:49 pm

    Okay … this whole markdown thing is not working for me …. soo here is a link to what I am talking about :) http://bible.comze.com/popup.html

    # September 13, 2012 at 11:48 pm

    I’m seeing a few of these characters ​

    ​collapsed:hover:after{
    content: “Lots of interesting information!”;
    display: block;
    }

    .collapsed2:hover:after{
    content: “Even more interesting information!”;
    display: block;
    }​

    should be

    .collapsed:hover:after{
    content: “Lots of interesting information!”;
    display: block;
    }

    .collapsed2:hover:after{
    content: “Even more interesting information!”;
    display: block;
    }

    # September 13, 2012 at 11:59 pm

    ok inserted that … but has not seemed to fix anything …

    # September 14, 2012 at 12:13 am

    ok sorta got it now … but still have one ​

    # September 14, 2012 at 12:18 am

    Even more interesting information!

    ​

    < !– Hosting24 Analytics Code –

    Sorry, Not sure how to use the code tags here.

    # September 14, 2012 at 12:18 am

    ok … just realized that this is not going to work … I need a very universal code where I can easily add countless popouts all over the place … and not have to use the css to add in content by creating all different kind of div names …

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".