'hover' for non-anchor link..

[maya]

I have some links..
http://www.francesdelrio.com/linksCSS.html

want it so when you hover over link ENTIRE DIV gets gray bg color (not
just text (like link Three is now on this page..)

but when hover over it, can only do so link (text) gets bg color, not
entire div.. which of course is no good b/c it only highlights text, not
block..

<div id="NavLeft"><a href="" class="nav" title="">Link One</a></div>
<div id="NavLeft"><a href="" class="nav" title="">Link Two</a></div>
(all css code in page in link above..)
etc..
I tried:

#NavLeft:hover {background-color:#EEEEEE}

but it didn't work.. I've seen this :hover used like this before, for a
non-anchor tag element.. in some of those css-drop-down menu demos..
(li:hover ul { display: block; }, for example, from here..
http://www.alistapart.com/articles/horizdropdowns

would appreciate some suggestions.. thanks..

[Sid Ismail]

On Sun, 18 Jun 2006 14:50:12 -0400, maya <ma********@yahoo.com> wrote:

: want it so when you hover over link ENTIRE DIV gets gray bg color
That is a job for javascript. Not CSS, not HTML.

Sid

[Harlan Messinger]

maya wrote:

I have some links..
http://www.francesdelrio.com/linksCSS.html

want it so when you hover over link ENTIRE DIV gets gray bg color (not
just text (like link Three is now on this page..)

but when hover over it, can only do so link (text) gets bg color, not
entire div.. which of course is no good b/c it only highlights text, not
block..

<div id="NavLeft"><a href="" class="nav" title="">Link One</a></div>
<div id="NavLeft"><a href="" class="nav" title="">Link Two</a></div>
(all css code in page in link above..)
etc..
I tried:

#NavLeft:hover {background-color:#EEEEEE}

but it didn't work..
In Firefox it does. IE doesn't implement this.

Try

a { display: block; }.

I've seen this :hover used like this before, for a non-anchor tag element.. in some of those css-drop-down menu demos..
(li:hover ul { display: block; }, for example, from here..
http://www.alistapart.com/articles/horizdropdowns

would appreciate some suggestions.. thanks..

[maya]

Sid Ismail wrote:

On Sun, 18 Jun 2006 14:50:12 -0400, maya <ma********@yahoo.com> wrote:

: want it so when you hover over link ENTIRE DIV gets gray bg color
That is a job for javascript. Not CSS, not HTML.

Sid

ok, thanks, it's as I feared then, need to do w/JS b/c CSS2 only
implemented by FF (and IE 7, but that's not good enough since most folks
still on IE 6..)

ALTHOUGH: little sample code I sent from that other pg does work in
IE6...(??)

thank you very much..

[Jim Moe]

maya wrote:

I have some links..
http://www.francesdelrio.com/linksCSS.html
want it so when you hover over link ENTIRE DIV gets gray bg color (not
just text (like link Three is now on this page..)

I tried:

#NavLeft:hover {background-color:#EEEEEE}

but it didn't work.. I've seen this :hover used like this before, for a
non-anchor tag element.. in some of those css-drop-down menu demos..
(li:hover ul { display: block; }, for example, from here..
http://www.alistapart.com/articles/horizdropdowns

IE only supports :hover on anchor (<a>) elements. You'll have to use
alternate methods to get :hover to work on other elements.
Notice in the example you gave, that IE is explicitly mentioned is to
primitive to work as expected. A bit of Javascript is provided. Of course,
if the visitor has JS disabled, they are SOL.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[axlq]

In article <59********************************@4ax.com>,
Sid Ismail <el***@nospam.com> wrote:

On Sun, 18 Jun 2006 14:50:12 -0400, maya <ma********@yahoo.com> wrote:

: want it so when you hover over link ENTIRE DIV gets gray bg color

That is a job for javascript. Not CSS, not HTML.

No, that's a job for CSS. It's in the spec, it's a styling feature,
therefore it's CSS. Javascript should be used for dynamic content
modification. Changing the background style of a block doesn't
qualify as content modification.

The problem the OP is facing is that Microsoft's abysmal and
nonstandard implementation of CSS forces us to use javascript hacks
to get around IE's shortcomings. This will be fixed in IE7, but
in the meantime, my attitude is, if IE users can't see decorative
features, that's tough. Microsoft is not paying me to work around
the bugs in their browser.

-A

[maya]

Jim Moe wrote:

maya wrote:

I have some links..
http://www.francesdelrio.com/linksCSS.html
want it so when you hover over link ENTIRE DIV gets gray bg color (not
just text (like link Three is now on this page..)

> I tried:

#NavLeft:hover {background-color:#EEEEEE}

but it didn't work.. I've seen this :hover used like this before, for a
non-anchor tag element.. in some of those css-drop-down menu demos..
(li:hover ul { display: block; }, for example, from here..
http://www.alistapart.com/articles/horizdropdowns

IE only supports :hover on anchor (<a>) elements. You'll have to use
alternate methods to get :hover to work on other elements.
Notice in the example you gave, that IE is explicitly mentioned is to
primitive to work as expected. A bit of Javascript is provided. Of course,
if the visitor has JS disabled, they are SOL.

ok, thanks.. I'm just trying to make it work like this one..
http://www.ecommercepartners.net/clients.shtml (links on the left.. they
get gray bg color when user hovers over them..)

couldn't glean from code how they do it on this pg.. (no JS functions
are called.. and it works in IE6...)

many thanks....:)

[Jim Moe]

maya wrote:

#NavLeft:hover {background-color:#EEEEEE}

but it didn't work.. I've seen this :hover used like this before, for a
non-anchor tag element.. in some of those css-drop-down menu demos..
(li:hover ul { display: block; }, for example, from here..
http://www.alistapart.com/articles/horizdropdowns

IE only supports :hover on anchor (<a>) elements. You'll have to use
alternate methods to get :hover to work on other elements.
Notice in the example you gave, that IE is explicitly mentioned is to
primitive to work as expected. A bit of Javascript is provided. Of course,
if the visitor has JS disabled, they are SOL.

ok, thanks.. I'm just trying to make it work like this one..
http://www.ecommercepartners.net/clients.shtml (links on the left.. they
get gray bg color when user hovers over them..)

couldn't glean from code how they do it on this pg.. (no JS functions
are called.. and it works in IE6...)

The same way as the AListApart does it. Set the *anchor* (<a>) to
display:block, not the list element (<li>).

Get the Firefox or Seamonkey browser <mozilla.org> and add this
extension to it: <http://chrispederick.com/work/webdeveloper/>. One its
many useful features is the display of CSS for a selection.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Neredbojias]

To further the education of mankind, maya <ma********@yahoo.com>
vouchsafed:

IE only supports :hover on anchor (<a>) elements. You'll have to
use
alternate methods to get :hover to work on other elements.
Notice in the example you gave, that IE is explicitly mentioned is
to
primitive to work as expected. A bit of Javascript is provided. Of
course, if the visitor has JS disabled, they are SOL.

ok, thanks.. I'm just trying to make it work like this one..
http://www.ecommercepartners.net/clients.shtml (links on the left..
they get gray bg color when user hovers over them..)

couldn't glean from code how they do it on this pg.. (no JS functions
are called.. and it works in IE6...)

That's a simple hover on link changing the background. View the
stylesheet.

--
Neredbojias
Infinity has its limits.