Forums

JosiahB

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 ...

  <a href="#" class="popover"  onclick="$('#hidencontent').css({'display':'block'});" onmouseover="$('#hidencontent').css({'display':'block'});" onmouseout="$('#hidencontent').css({'display':'none'});">hover/click over me!</a>
                  <div id="hidencontent">
                         <p>
                              Lots of interesting information ... <a href="#" class="anotherpopover" onclick="$('#morehidencontent').css({'display':'block'});" onmouseover="$('#morehidencontent').css({'display':'block'});" onmouseout="$('#morehidencontent').css({'display':'none'});">hover/click over me for more information!</a>
                         </p>
                  </div><!--end of hidencontent-->
                       <div id="morehidencontent">
                            <p>
                                 Even more interesting information!
                            </p>
                       </div><!--end of morehidencontent-->

zonger

I don't think you are supposed to "onclick" an ID. It should be some javascript function.

JosiahB

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

zonger

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

JosiahB

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

amoss

This work? http://jsfiddle.net/VTret/

JosiahB

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

amoss

What form would that be?

JosiahB

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 ... .expanded div{ display: block; } .collapsed div{ display:none; }

.collapsed2 div{
display:none;
}



collapsed:hover:after{
    content: "Lots of interesting information!";
    display: block;
}

.collapsed2:hover:after{
    content: "Even more interesting information!";
    display: block;
}
</style>
</head>
<body>
  <div class="collapsed" style="cursor:pointer"  onclick="this.className = this.className=='collapsed' ?  'expanded' :  'collapsed'">hover/click over me!

Lots of interesting information!

</div>

<br />
<br />

hover/click over me for more information!

Even more interesting information!

JosiahB

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

amoss

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; }

JosiahB

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

JosiahB

ok sorta got it now ... but still have one â€‹

amoss

Even more interesting information!

â€‹ </body </html <!-- Hosting24 Analytics Code --

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

JosiahB

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 ...

JosiahB

sorry I did not realize this earlier! on jsfiddle I thought it was going to work the way I had planned ...

amoss

ok, good luck.

treehouse : what would you like to learn today?

Forums

Display elements by hovering/clicking link ... Help!