...

View Full Version : Hover hide



alykins
04-26-2011, 09:22 PM
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).

teedoff
04-26-2011, 09:49 PM
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??

alykins
04-26-2011, 10:00 PM
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.

alykins
04-26-2011, 10:05 PM
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;}

teedoff
04-26-2011, 10:07 PM
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.

alykins
04-26-2011, 10:18 PM
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.

msevrens
04-27-2011, 02:54 AM
#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.

msevrens
04-27-2011, 02:59 AM
They wanted you to use tables for layout? Who the **** are these people.

bullant
04-27-2011, 07:38 AM
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?


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

alykins
04-27-2011, 12:36 PM
#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:


#hide:hover { visibility: hidden;}
#hide:hover #me{ visibility: visible;}


<Link> css:


#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:


<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 :eek:
so frustrating

bullant
04-27-2011, 12:41 PM
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..

alykins
04-27-2011, 05:06 PM
that is exactly what I want, but it does not happen in IE, FF or chrome

teedoff
04-27-2011, 05:09 PM
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.

bullant
04-28-2011, 01:10 AM
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.

alykins
04-28-2011, 02:39 AM
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...


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

alykins
04-29-2011, 12:03 AM
Bullant:

I added above code to a containing element and it works fine. But I dont understand why it only works when contained inside an element... (I also changed it so its---



<style type= "text/css">
#contain:hover #hide{ visibility: hidden;}
#contain:hover #me{ visibility: visible;}
#me{visibility: hidden; background-color:purple;}
#hide{ background-color: pink;}
</style>

</head>

<body>
<div id= "contain">
<div id= "hide">Hide!</div>
<div id= "me">Me!</div>
</div>

.... I'm still waiting on my refrence text books- but until then could you (or someone) explain WHY this works and my previous doesnt? Or provide a link? The websites I've looked into thus far have only shown a few examples of how to implement code, not why/how behaves...
In summary: As you can see my code that works is not that much different than the one that doesn't... the difference is the containing element... but I don't understand its behavior.

PS how do I set a topic as resolved?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum