SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    winnipeg
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show hide behavior in css

    is there a way to add show and hide behavior to content as the user rolls his mouse over navbar items in css? the content are div tags that contain an image and text.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes.

    You can do this using the :hover pseudo-element, but it will only work if the things you want to show are contained within the bit you are rolling over (IYSWIM).
    HTML Code:
    <html>
    <head>
    <style type="text/css">
    
    #nav a span {
    	display: none;
    }
    
    #nav a:hover span {
    	display: block;
    }
    
    </style>
    </head>
    <body>
    
    <div id="nav">
    
    <a href="#">Rollover Me! <span>Hello!</span></a>
    
    </div>
    
    </body>
    
    </html>
    The usual use for this effect is to show/hide nested lists to create a dropdown menu effect.

    If you want to make a totally different part of the screen show/hide, AFAIK you'll have to use Javascript.

    Happy to be corrected, though.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Western Europe
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paste the code below into your page.

    To hide an element, call the function showDiv, passing the div's ID as a string, and then False. To show, pass the ID and True to the function.

    You'll probably want to do something like: onMouseOver="showDiv('button1',False);" onMouseOut="showDiv('button1',True);"

    Remember, you can also string together JavaScript calls in a single event handler, separated by semicolons, e.g.:
    onMouseOver="showDiv('button1',False); showDiv('button2',True);"


    <script type="text/javascript">
    <!--
    function getRefToDiv(divID) {
    if( document.layers ) { //Netscape layers
    return document.layers[divID]; }
    if( document.getElementById ) { //DOM; IE5, NS6, Mozilla, Opera
    return document.getElementById(divID); }
    if( document.all ) { //Proprietary DOM; IE4
    return document.all[divID]; }
    if( document[divID] ) { //Netscape alternative
    return document[divID]; }
    return false;
    }

    function showDiv(wotDiv, show) {
    myReference = getRefToDiv(wotDiv);
    if( !myReference ) {
    window.alert('Nothing works in this browser');
    return false;
    }
    if( myReference.style ) {
    if (show) {
    myReference.style.visibility = 'visible';
    }
    else {
    myReference.style.visibility = 'hidden';
    }

    }
    else {
    if( myReference.visibility ) {
    if (show) {
    myReference.visibility = 'show';
    }
    else {
    myReference.visibility = 'hide';
    }
    }
    else {
    window.alert('Nothing works in this browser');
    return false;
    }
    }
    return true;
    }
    // -->
    </script>


    <a href="#" onClick="showDiv('hideme',true);">Show hidden element</a>

    <div id="hideme" style="display:block; padding:50px; background-color:#ff6; border:1px solid #000;" onClick="showDiv('hideme',false);">
    <a href="#">Hide me</a>
    </div>
    Last edited by Scratch2; Oct 7, 2004 at 05:54. Reason: ..
    Check out my free course in the essentials of web design: Web Design From Scratch

  4. #4
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Offenbach
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    > If you want to make a totally different part of the screen show/hide, AFAIK you'll have to use Javascript.

    Right, not in the semantic sense, but you can position them accordingly.

    www.meyerweb.com/eric/css/edge/popups/demo.html

    www.meyerweb.com/eric/css/edge/menus/demo.html

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)

  6. #6
    SitePoint Member
    Join Date
    Oct 2004
    Location
    winnipeg
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    am working on these this week. thanks to y'all.


Bookmarks

Posting Permissions

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