Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Toggling Layer Visibility and CSS

    Hi

    I am pretty sure the answer to this is "no", but could someone please confirm it for me. In toggling layer visibility, is there ANY way this can be done without using Javascript ie., through CSS only and avoiding any onClicks or onRollovers. Trying to make a particular site W3C compliant and the Javascript for layer toggling is breaking it.

    Apprec. your input
    Cheers
    Anthony

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Hey, welcom to the forums

    I don't know, but could you do something like:

    Code:
    img
    {
    z-index:1;
    }
    
    img:hover
    {
    z-index:2;
    }
    if you get stuck on the hover, search the forum for "whatever :hover"

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hovers

    The only behaviour-ish effect you can accomplish with CSS is with the :hover pseudoclass: you could toggle an element's visibility when hovering over its parent. For onclick effects, though, you're pretty much dependant on JavaScript.
    If you can supply some more info, we might help with cooking something up.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    here is exactly what I am trying to achieve...

    Hi guys,

    Thanks for your quick replies. Basically what I am trying to achieve in detail is this:

    I have 6 text links which I need layers to popup in an absolute position on the page upon rollover of the links. The 6 layers will appear in exactly the same spot but visibility will be determined by which link is "hovered".

    Can this be done using just CSS or do we need to use Javascript to toggle the layer visibility.

    Thanks again
    Anthony

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hey Anthony,

    You can use CSS pretty easily for this kind of effect... some time ago I typed this example up for another thread but I'm sure it might provide a springboard for you...

    http://richardmedek.com/temp/example4.htm

    If you need additional help on the code or want to try another concept let me/us know. Hope this helps...

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hover all the way

    This sort of thing can be accomplished entirely with CSS and the :hover pseudoclass, provided that you apply any of the available solutions to graft :hover functionality on other elements besides links for IE, which only supports :hover on links (Peter Nederlof's whatever:hover comes to mind).

    Since it's semantically incorrect to have a elements contain anything but inline content, and you probably need some block level element for your "layer", you'll be looking at something like this:
    Code:
    <ul>
    <li><a href="#">The first link</a><p>Toggleable paragraph one.</p></li>
    <li><a href="#">The second link</a><p>Toggleable paragraph two.</p></li>
    </ul>
    Since you mentioned "a list of links", an unordered list seemed in order...

    As both the link and the toggleable layer (in this example a paragraph; could be something else) are children of each list item, the following selectors:
    Code:
    li a {...}
    li p {...}
    li:hover a {...}
    li:hover p {...}
    can be used to set both the unhovered and the hovered states of the links and the paragraphs. For the paragraphs, the unhovered state could be "display: none;" (which takes the paragraph out of the normal flow altogether) and the hovered state would include something like:
    Code:
    li:hover p {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    }
    (offset and width values completely arbitrary, of course).
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •