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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Hover hide

  1. #1
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts

    Hover hide

    Heres the situation....
    I have elements |A| and |B|... upon load screen |A| is visible, and |B| is hidden. Hover over |A|, and |A| disappears and |B| appears. Stop hovering it reverts to normal state... I have the first part, |A| is visible, |B| is not, and when you hover over |A| it disappears... But I cannot figure out how to make |B| appear...

    I've been instructed to do this in ONLY html, and I am already breaking rule for web layout using .css file.... I just don't think it (the rest of the page design) can be done "properly" w/o css.... but that is a diff story... Anyways- I was offered a tip: elements can be set to visible= true|false.... but that is asp coding and I am not allowed to use it (and haven't learned it yet).... any tips?

    To all who helped with my layout issue last night... Thanks! I ended up re-coding the page and just using a linked css file and everything came out kosher (well- theres some ie problems but I'll figure it out).

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    and I am already breaking rule for web layout using .css file
    and who's rule is this? Almost all modern pages use css now. Standard practices are to separate content from style.

    Now its hard to help with you current question without code or better a link??
    Teed

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts
    long story short- where I live my career field has crashed (BS EE) so I am now working remote for a development company... I am right now "interning" (I guess extern would be more appropriate bc I'm out of college) and trying to learn 6 languages so I can start getting paid. I am given assignments and they (my employers) won't let me move on until I complete these "tasks".... right now the task is the one stated above... I was hung up for about a week bc I was having all sorts of alignment issues with my layout divs... I FINALLY have them working and now am on to the task of hiding |A| and making |B| appear... I know that in practical coding I will be using javascript and css and whatever else, but for now I am not allowed to... I "broke" the rules bc I refuse to use tables as layouts and (to my knowledge) HAVE to use css to make a functional layout w/ div elements.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts
    My code is kind of arbitrary, along the lines of...

    <div id="contain">
    <div id= "item" class= "hoverhide"> text </div>
    <div id= "object"> text </div>
    </div>

    #item{ blah blah blah}
    #object{ blah blah blah}
    .hoverhide:hover {visibility:hidden;}

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    hmm well even with tables, unless you just want a page full of text, there is going to be some styling there. It may be embedded or inline even, but styling nonetheless.

    Again, as for your hidden div question, need to see some code to see what you have so far.
    Teed

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts
    Quote Originally Posted by teedoff View Post
    hmm well even with tables, unless you just want a page full of text, there is going to be some styling there. It may be embedded or inline even, but styling nonetheless.
    kind of why i just said forget it, I'm gunna use css anyways... I also dont like to use a lot of local css so i just do everything in a linked css file.

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    42
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Code:
    #elementa {
    	width:100px;
    	height:100px;
    	background:yellow;
    }
    
    #elementb {
    	width:100px;
    	height:100px;
    	background:red;
    	visibility:hidden;
    }
    
    #elementa:hover + #elementb { 
    	visibility:visible;
    
    }
    
    #elementa:hover {
    	background:white;
    }
    The + is an adjacent sibling selector, see http://css-tricks.com/child-and-sibling-selectors/ for more.

    Kind of cheating on the last part. The problem is if you set the visibility of element a to hidden, theres nothing to hover off of to trigger the change back. So you can set it so that when you hover over element a it sets it's background to the same as the background of the page, so theres still something to hover off of to change it back.

    I really don't know what your teacher is talking about, without using javascript or css theres no way to trigger a hover event, unless you use inline style, but thats just... awful.

  • Users who have thanked msevrens for this post:

    alykins (04-28-2011)

  • #8
    New Coder
    Join Date
    Apr 2011
    Posts
    42
    Thanks
    5
    Thanked 4 Times in 4 Posts
    They wanted you to use tables for layout? Who the **** are these people.

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    HTML is only a markup language. If you want things to happen when events occur you will need css and/or javascript.

    Something like this maybe?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #wrapper {
                    position: relative;
                    width: 50%;
                    margin: 0px auto 0px auto;
                }
                #divA {
                    border: 1px solid red;
                }
                #wrapper:hover #divB {
                    visibility: visible;
                }
                #wrapper:hover #divA {
                    visibility: hidden;
                }
                #divB {
                    visibility: hidden;
                    position: absolute;
                    top: 100px;
                    left: 200px;
                    width: 50%;
                    border: 1px solid blue;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="wrapper">
                <div id="divA">This is Div A</div>
                <div id="divB">This is Div B</div>
            </div>
        </body>
    </html>
    Last edited by bullant; 04-27-2011 at 07:49 AM.

  • Users who have thanked bullant for this post:

    alykins (04-28-2011)

  • #10
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts
    Quote Originally Posted by bullant View Post
    Code:
                #wrapper {
                    position: relative;
                    width: 50%;
                    margin: 0px auto 0px auto;
                }
                #divA {
                    border: 1px solid red;
                }
                #wrapper:hover #divB {
                    visibility: visible;
                }
                #wrapper:hover #divA {
                    visibility: hidden;
                }
                #divB {
                    visibility: hidden;
                    position: absolute;
                    top: 100px;
                    left: 200px;
                    width: 50%;
                    border: 1px solid blue;
    I tried something very similar to this... It still does not work correctly

    Local style css:
    Code:
       #hide:hover { visibility: hidden;}
       #hide:hover #me{ visibility: visible;}
    <Link> css:
    Code:
      #hide{
         background-color: red;
         height: 30px;
         width: 50%;
         text-align: center;
         position: absolute;
         bottom: 0px;
         left: 0px;
         }            
      
      #me{
         background-color: purple;
         height: 30px;
         width:50%;
         position: absolute;
         right: 0px;
         bottom: 0px;
         text-align: center;
         visibility: hidden;
         }
    Divs in code:
    Code:
          <div id= "lowerleft_bottom">
            <div id= "hide">Hide!</div>
            <div id= "me">Me!</div>
          </div>

    ... its 4 am, I went to bed at 12--- I cannot turn my flippin brain off
    so frustrating

  • #11
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by alykins View Post
    I tried something very similar to this... It still does not work correctly
    I don't understand. It works ok in my IE9 and FF4.

    On page load, divA is visible, divB is not. When I hover on divA, it disappears and divB appears. When I move off divA, it reappears and divB disappears. Isn't that what you wanted in your op?

    I have elements |A| and |B|... upon load screen |A| is visible, and |B| is hidden. Hover over |A|, and |A| disappears and |B| appears. Stop hovering it reverts to normal state..

  • #12
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts
    that is exactly what I want, but it does not happen in IE, FF or chrome

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Hi alykins, not sure what you're doing wrong. I just tested bullant's code in IE8 and FF 3.6.14 and it works perfectly.
    Teed

  • #14
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by alykins View Post
    that is exactly what I want, but it does not happen in IE, FF or chrome
    The code I posted works fine in my IE9, FF4 and Chrome v10.

    Can you post the actual code you are running and the versions of the browsers you tested it in.

  • #15
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts
    first off, thanks so much for continuing helping me...
    so i was trying to just eliminate all possible interfrences and learn from a SUPER basic code form... I wrote this (to try and understand this) and it doesn't work... I feel like I am missing something fundamental thats staring me right in the eye... here's the code...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
      charset=utf-8" />
    <title>************************</title>
    
         
    <!--<link rel= "stylesheet" 
          type= "text/css"
          href= "*******.css" />-->
    <style type= "text/css">
       #hide:hover { visibility: hidden;}
       #hide:hover #me{ visibility: hidden;} 
       #me{visibility: visible; background-color:purple;}          
       #hide{ background-color: pink;}
    </style>
      
    </head>
    
    <body>
    
    <div id= "hide">Hide!</div>
    <div id= "me">Me!</div>
    
    </body>
    </html>
    Note: This is not the code from my original question, I am just trying to understand it so I can apply it to the code that originally spawned this thread.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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