3 Replies Latest reply on Sep 22, 2007 10:34 AM by Newsgroup_User

    #projectList a:hover span{} - CSS does not work...

    Level 7
      Hi all

      here's my CSS:

      #projectList a span{
      background-color:#fff;
      }
      #projectList a:hover span{
      background-color:#000;
      }


      and the html:

      <div id="projectList">
      <a href="#">some text <span>some more text</span></a>
      </div>

      I am trying to give spans contained in links a different style if the link is moused-over or not...

      This is not working, what would be the proper way of doing this?

      --
      seb ( ---@webtrans1.com)
      http://webtrans1.com | high-end web design

      An Ingenious WebSite Builder: http://sitelander.com
        • 1. Re: #projectList a:hover span{} - CSS does not work...
          Level 7
          So you want only *part* of the link text to have a different style when the
          link is moused over.

          This site of Eric Meyer's is always helpful to me when I want to be sure the
          selectors are what I want: http://gallery.theopalgroup.com/selectoracle/

          It says that your first selector,

          #projectList a span

          means:

          "Selects any span element that is a descendant of an a element that is a
          descendant of any element with an id attribute that equals projectList."

          It says that your second selector,

          #projectList a:hover span

          means:

          Selects any span element that is a descendant of an a element which is in a
          hover state that is a descendant of any element with an id attribute that
          equals projectList.

          So I believe the selectors are correct.

          Have you tried, instead, applying a class directly to each of the <a>
          elements, if there aren't too many, to see if that works?


          --
          Patty Ayers | Adobe Community Expert
          www.WebDevBiz.com
          Free Articles on the Business of Web Development
          Web Design Contract, Estimate Request Form, Estimate Worksheet
          --


          "(_seb_)" <seb@webtrans1.com> wrote in message
          news:fd314t$cpe$1@forums.macromedia.com...
          > Hi all
          >
          > here's my CSS:
          >
          > #projectList a span{
          > background-color:#fff;
          > }
          > #projectList a:hover span{
          > background-color:#000;
          > }
          >
          >
          > and the html:
          >
          > <div id="projectList">
          > <a href="#">some text <span>some more text</span></a>
          > </div>
          >
          > I am trying to give spans contained in links a different style if the link
          > is moused-over or not...
          >
          > This is not working, what would be the proper way of doing this?
          >
          > --
          > seb ( ---@webtrans1.com)
          > http://webtrans1.com | high-end web design
          >
          > An Ingenious WebSite Builder: http://sitelander.com


          • 2. Re: #projectList a:hover span{} - CSS does not work...
            Level 7
            seb, that should do just what you want. Can you show us the page where it's
            not?

            --
            Murray --- ICQ 71997575
            Adobe Community Expert
            (If you *MUST* email me, don't LAUGH when you do so!)
            ==================
            http://www.dreamweavermx-templates.com - Template Triage!
            http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
            http://www.dwfaq.com - DW FAQs, Tutorials & Resources
            http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
            ==================


            "(_seb_)" <seb@webtrans1.com> wrote in message
            news:fd314t$cpe$1@forums.macromedia.com...
            > Hi all
            >
            > here's my CSS:
            >
            > #projectList a span{
            > background-color:#fff;
            > }
            > #projectList a:hover span{
            > background-color:#000;
            > }
            >
            >
            > and the html:
            >
            > <div id="projectList">
            > <a href="#">some text <span>some more text</span></a>
            > </div>
            >
            > I am trying to give spans contained in links a different style if the link
            > is moused-over or not...
            >
            > This is not working, what would be the proper way of doing this?
            >
            > --
            > seb ( ---@webtrans1.com)
            > http://webtrans1.com | high-end web design
            >
            > An Ingenious WebSite Builder: http://sitelander.com

            • 3. Re: #projectList a:hover span{} - CSS does not work...
              Level 7
              "(_seb_)" <seb@webtrans1.com> wrote in message
              news:fd314t$cpe$1@forums.macromedia.com...
              > Hi all
              >
              > here's my CSS:
              >
              > #projectList a span{
              > background-color:#fff;
              > }
              > #projectList a:hover span{
              > background-color:#000;
              > }
              >
              >
              > and the html:
              >
              > <div id="projectList">
              > <a href="#">some text <span>some more text</span></a>
              > </div>

              Hi Seb,
              Try to add this to what you already have:
              a:hover {background:0 0}

              --
              Thierry
              Articles and Tutorials: http://www.TJKDesign.com/go/?0
              --
              http://www.divahtml.com/products/scripts_dreamweaver_extensions.php
              - Add "you are here" highlighting to virtually any menu
              - FAQ pages made easy