By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,085 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

hover display problem

P: n/a

I'm having problems understanding display and hover.

I'm trying to hover over a question and have the answer display.

..question {
color: #fff;
background: purple;
width: 300px;
font-weight: bold;
padding-left: 5px;
}
..answer {
color: #000;
background: #fff;
width: 500px;
padding: 0px 20px 0px 20px;
display: none;
}

<div class="question">This is a question</div>
<div class="answer">This is the answer. This is the answer. This is the
answer. This is the answer. This is the answer. This is the answer. This
is the answer. This is the answer. This is the answer. This is the
answer. This is the answer. This is the answer. This is the answer. This
is the answer. This is the answer. This is the answer. </div>

..hover:question {display .answer}

Totally lost.
Feb 9 '07 #1
Share this Question
Share on Google+
11 Replies


P: n/a
zzpat <zz*******@gmail.comwrote:
>.hover:question {display .answer}
http://www.w3.org/TR/CSS1#basic-concepts

'display'
Value: inline | block | list-item | run-in | inline-block |
table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | none | inherit
http://www.w3.org/TR/CSS21/visuren.html#display-prop

--
Spartanicus
Feb 9 '07 #2

P: n/a
Rik
On Fri, 09 Feb 2007 21:58:38 +0100, Spartanicus <in*****@invalid.invalid>
wrote:
zzpat <zz*******@gmail.comwrote:
>.hover:question {display .answer}

http://www.w3.org/TR/CSS1#basic-concepts

'display'
Value: inline | block | list-item | run-in | inline-block |
table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | none | inherit
http://www.w3.org/TR/CSS21/visuren.html#display-prop

Indeed.

..question:hover .answer{display:block;}

--
Rik Wasmus
Feb 9 '07 #3

P: n/a
Scripsit zzpat:
I'm trying to hover over a question and have the answer display.
That's a wrong approach, at least in authoring for the WWW (which is what we
discuss here). You would rely on CSS in matters of disclosing essential
information to the user, thereby ignoring the usual CSS caveats.
.hover:question {display .answer}

Totally lost.
Yes, you are; you can't change the properties of another element upon
hovering an element.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 9 '07 #4

P: n/a
Rik
Jukka K. Korpela <jk******@cs.tut.fiwrote:
>.hover:question {display .answer}

Totally lost.

Yes, you are; you can't change the properties of another element upon
hovering an element.
I'm not sure wether it's according to standards, but FireFox & Opera have
no problem with:

div:hover + div {color:green;}
--
Rik Wasmus
Feb 9 '07 #5

P: n/a
Rik wrote:
Jukka K. Korpela <jk******@cs.tut.fiwrote:
>>.hover:question {display .answer}

Totally lost.

Yes, you are; you can't change the properties of another element upon
hovering an element.

I'm not sure wether it's according to standards, but FireFox & Opera
have no problem with:

div:hover + div {color:green;}
--Rik Wasmus
I found an interesting link that does some of what I want.
http://www.adjustafresh.com/tutorial...-markup03.html

Hover changes text.
Feb 9 '07 #6

P: n/a
Rik
On Fri, 09 Feb 2007 22:54:09 +0100, zzpat <zz*******@gmail.comwrote:
Rik wrote:
>Jukka K. Korpela <jk******@cs.tut.fiwrote:
>>>.hover:question {display .answer}

Totally lost.

Yes, you are; you can't change the properties of another element upon
hovering an element.
I'm not sure wether it's according to standards, but FireFox & Opera
have no problem with:
div:hover + div {color:green;}

I found an interesting link that does some of what I want.
http://www.adjustafresh.com/tutorial...-markup03.html
Well, a perfect example about how most implementations of this nonsense
are evil. What if I wanted to copy a sentence from the content? Fat
chance, as soon as my mouse heads that direction the text is gone again.

--
Rik Wasmus
Feb 9 '07 #7

P: n/a
In article <eq*********@enews1.newsguy.com>,
zzpat <zz*******@gmail.comwrote:
>
I'm having problems understanding display and hover.

I'm trying to hover over a question and have the answer display.

.question {
color: #fff;
background: purple;
....
>
.hover:question {display .answer}

Totally lost.
You want understanding or you want to display an answer? Under
the bonnet of cars, mechanics do naughty things with tools, like
tap things with pliers or screwdrivers.

<http://members.optusnet.com.au/droovies/test/slack.html>

--
dorayme
Feb 9 '07 #8

P: n/a
Rik wrote:
>>
I found an interesting link that does some of what I want.
http://www.adjustafresh.com/tutorial...-markup03.html

Well, a perfect example about how most implementations of this nonsense
are evil. What if I wanted to copy a sentence from the content? Fat
chance, as soon as my mouse heads that direction the text is gone again.

--Rik Wasmus
I guess I don't see that problem in Firefox. Copying isn't a problem.
Needless to say this needs work but here's what I came up with.

div:hover p {
display: block;
font-weight: 100;
}
..question {
display: block;
width: 300px;
font-weight: bold;
padding-left: 5px;
}
..answer {
color: #000;
background: #fff;
width: 500px;
padding: 0px 20px 0px 20px;
display: none;
}

<div class="question">This is a question
<p class="answer">This is the answer. This is the answer. This is the
answer. This is the answer. This is the answer. This is the answer. This
is the answer. This is the answer. This is the answer. This is the
answer. This is the answer. This is the answer. This is the answer. This
is the answer. This is the answer. This is the answer.</p>
</div>
Feb 10 '07 #9

P: n/a
Rik
On Sat, 10 Feb 2007 15:52:44 +0100, zzpat <zz*******@gmail.comwrote:
Rik wrote:
>>>
I found an interesting link that does some of what I want.
http://www.adjustafresh.com/tutorial...-markup03.html
Well, a perfect example about how most implementations of this
nonsense are evil. What if I wanted to copy a sentence from the
content? Fat chance, as soon as my mouse heads that direction the text
is gone again.
--Rik Wasmus

I guess I don't see that problem in Firefox.
I see the problem in Opera, and in a lesser extent in MSIE & FireFox: one
has to _keep_ hovering either the tab or the text to let it remain
visible. That means if I move my mouse from a tab, in Firefox & MSIE I can
only do that downwards towards the text. Hovering and then mousing to the
left, roght or top will put the deafult tab2 back.

In Opera it's even worse, because there's a gap between the tab and the
content. On crossing this gap, the page will return to the default, so the
only way I can see that content is to keep my mouse hovered above the tab.
--
Rik Wasmus
Feb 11 '07 #10

P: n/a
Rik wrote:
uess I don't see that problem in Firefox.
>
I see the problem in Opera, and in a lesser extent in MSIE & FireFox:
one has to _keep_ hovering either the tab or the text to let it remain
visible. That means if I move my mouse from a tab, in Firefox & MSIE I
can only do that downwards towards the text. Hovering and then mousing
to the left, roght or top will put the deafult tab2 back.

In Opera it's even worse, because there's a gap between the tab and the
content. On crossing this gap, the page will return to the default, so
the only way I can see that content is to keep my mouse hovered above
the tab.
--Rik Wasmus
I'm of the opinion that clicking a mouse will end. Maybe someday css
will allow us to do a mouse clicks without clicking (something like
hover:click).

A FAQ like this usually requires a script and a click. I was trying to
do it without both - mostly without the click. To that end it did what
I wanted it to do.
Feb 12 '07 #11

P: n/a
Rik
On Mon, 12 Feb 2007 18:42:11 +0100, zzpat <zz*******@gmail.comwrote:
Rik wrote:
uess I don't see that problem in Firefox.
> I see the problem in Opera, and in a lesser extent in MSIE & FireFox:
one has to _keep_ hovering either the tab or the text to let it remain
visible. That means if I move my mouse from a tab, in Firefox & MSIE I
can only do that downwards towards the text. Hovering and then mousing
to the left, roght or top will put the deafult tab2 back.
In Opera it's even worse, because there's a gap between the tab and
the content. On crossing this gap, the page will return to the default,
so the only way I can see that content is to keep my mouse hovered
above the tab.
--Rik Wasmus

I'm of the opinion that clicking a mouse will end. Maybe someday css
will allow us to do a mouse clicks without clicking (something like
hover:click).

A FAQ like this usually requires a script and a click. I was trying to
do it without both - mostly without the click. To that end it did what
I wanted it to do.

IMHO I should be able to use all main functionality of a page using only a
keyboard (graphical effects I can do without). If that's not possible,
it's very, very likely some people won't be able to use the site at all.
--
Rik Wasmus
Feb 12 '07 #12

This discussion thread is closed

Replies have been disabled for this discussion.