'hover' for non-anchor link..

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • maya
    #1

    'hover' for non-anchor link..

    I have some links..
    404 Not Found
    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..
    Drop-Down Menus, Horizontal Style
    http://www.alistapart.com/articles/horizdropdowns
    Multi-tiered drop-down menus can be a hassle to build and maintain — especially when they rely on big, honking chunks of JavaScript. Nick Rigby presents a way to handle this common navigation…


    would appreciate some suggestions.. thanks..


    Tags: None
    • Sid Ismail
      #2
      Re: 'hover' for non-anchor link..

      On Sun, 18 Jun 2006 14:50:12 -0400, maya <maya778899@yah oo.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


        Comment

        • Harlan Messinger
          #3
          Re: 'hover' for non-anchor link..

          maya wrote:[color=blue]
          > 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..[/color]

          In Firefox it does. IE doesn't implement this.

          Try

          a { display: block; }.

          I've seen this :hover used like this before, for a[color=blue]
          > 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..
          >
          >[/color]

            Comment

            • maya
              #4
              Re: 'hover' for non-anchor link..

              Sid Ismail wrote:[color=blue]
              > On Sun, 18 Jun 2006 14:50:12 -0400, maya <maya778899@yah oo.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
              >
              >[/color]
              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..


                Comment

                • Jim Moe
                  #5
                  Re: 'hover' for non-anchor link..

                  maya wrote:[color=blue]
                  > 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
                  >[/color]
                  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)

                    Comment

                    • axlq
                      #6
                      Re: 'hover' for non-anchor link..

                      In article <59ab92l3bgja5u bbih804i11b8b94 9r2k3@4ax.com>,
                      Sid Ismail <elsid@nospam.c om> wrote:[color=blue]
                      >On Sun, 18 Jun 2006 14:50:12 -0400, maya <maya778899@yah oo.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.[/color]

                      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

                        Comment

                        • maya
                          #7
                          Re: 'hover' for non-anchor link..

                          Jim Moe wrote:[color=blue]
                          > maya wrote:
                          >[color=green]
                          >>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..)
                          >>[/color]
                          >[color=green]
                          > > I tried:[/color]
                          >[color=green]
                          >>#NavLeft:hove r {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
                          >>[/color]
                          >
                          > 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.[/color]

                          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....:)




                            Comment

                            • Jim Moe
                              #8
                              Re: 'hover' for non-anchor link..

                              maya wrote:[color=blue][color=green]
                              >>[color=darkred]
                              >>>#NavLeft:hov er {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
                              >>>[/color]
                              >>
                              >> 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.[/color]
                              >
                              > 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...)
                              >[/color]
                              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.c om/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)

                                Comment

                                • Neredbojias
                                  #9
                                  Re: 'hover' for non-anchor link..

                                  To further the education of mankind, maya <maya778899@yah oo.com>
                                  vouchsafed:
                                  [color=blue][color=green]
                                  >> 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.[/color]
                                  >
                                  > 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...)[/color]

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

                                  --
                                  Neredbojias
                                  Infinity has its limits.

                                    Comment

                                    Previous template Next
                                    Working...