a:hover and ahover are coupled

Discussion in 'ASP .Net' started by Cal Who, Jan 17, 2010.

  1. Cal Who

    Cal Who Guest

    I do not want underlines on my menu items

    <asp:Menu ..snip..StaticHoverStyle-CssClass="ahover"

    But I would like them on anchor elements

    See the <a href="http://www.=XYZnews.org/">XYZ</a> site for more
    information.

    So I did this:

    a:hover

    {

    font-size: larger;

    font-weight: bold;

    text-decoration: underline ;

    }

    ..ahover

    {

    font-size: larger;

    font-weight: bold;

    text-decoration: none ;

    }

    I get no underlines at all.

    But if I add !Important to the a:hover I get underlines in both places.

    I also tried other placements of !mportant.

    Do you know how to uncouple these elements?



    Thanks
     
    Cal Who, Jan 17, 2010
    #1
    1. Advertising

  2. Cal Who

    James Irvine Guest

    Cal Who wrote:
    > I do not want underlines on my menu items
    >
    > <asp:Menu ..snip..StaticHoverStyle-CssClass="ahover"
    >
    > But I would like them on anchor elements
    >
    > See the <a href="http://www.=XYZnews.org/">XYZ</a> site for more
    > information.
    >
    > So I did this:
    >
    > a:hover
    >
    > {
    >
    > font-size: larger;
    >
    > font-weight: bold;
    >
    > text-decoration: underline ;
    >
    > }
    >
    > .ahover
    >
    > {
    >
    > font-size: larger;
    >
    > font-weight: bold;
    >
    > text-decoration: none ;
    >
    > }
    >
    > I get no underlines at all.
    >
    > But if I add !Important to the a:hover I get underlines in both places.
    >
    > I also tried other placements of !mportant.
    >
    > Do you know how to uncouple these elements?
    >
    >
    >
    > Thanks
    >
    >
    >
    >


    this seems to work:


    a
    {

    font-size: larger;

    font-weight: bold;

    text-decoration: underline ;

    }



    ..ahover /* for the asp menu */

    {

    font-size: larger;

    font-weight: bold;

    text-decoration: none ;

    }




    <asp:Menu ID="Menu1" runat="server" StaticHoverStyle-CssClass="ahover"
    StaticDisplayLevels="3">
    <Items>
    <asp:MenuItem Text="File" Value="File">
    <asp:MenuItem Text="New" Value="New"></asp:MenuItem>
    <asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
    </asp:MenuItem>
    <asp:MenuItem Text="Edit" Value="Edit">
    <asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
    <asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
    </asp:MenuItem>
    <asp:MenuItem Text="View" Value="View">
    <asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
    <asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
    </asp:MenuItem>
    </Items>
    </asp:Menu>


    <a>zzz</a>
     
    James Irvine, Jan 17, 2010
    #2
    1. Advertising

  3. I only want to under line with Hover - not always.
    Thanks

    "James Irvine" <> wrote in message
    news:_CK4n.1803$...
    > Cal Who wrote:
    >> I do not want underlines on my menu items
    >>
    >> <asp:Menu ..snip..StaticHoverStyle-CssClass="ahover"
    >>
    >> But I would like them on anchor elements
    >>
    >> See the <a href="http://www.=XYZnews.org/">XYZ</a> site for more
    >> information.
    >>
    >> So I did this:
    >>
    >> a:hover
    >>
    >> {
    >>
    >> font-size: larger;
    >>
    >> font-weight: bold;
    >>
    >> text-decoration: underline ;
    >>
    >> }
    >>
    >> .ahover
    >>
    >> {
    >>
    >> font-size: larger;
    >>
    >> font-weight: bold;
    >>
    >> text-decoration: none ;
    >>
    >> }
    >>
    >> I get no underlines at all.
    >>
    >> But if I add !Important to the a:hover I get underlines in both places.
    >>
    >> I also tried other placements of !mportant.
    >>
    >> Do you know how to uncouple these elements?
    >>
    >>
    >>
    >> Thanks
    >>
    >>
    >>
    >>

    >
    > this seems to work:
    >
    >
    > a
    > {
    >
    > font-size: larger;
    >
    > font-weight: bold;
    >
    > text-decoration: underline ;
    >
    > }
    >
    >
    >
    > .ahover /* for the asp menu */
    >
    > {
    >
    > font-size: larger;
    >
    > font-weight: bold;
    >
    > text-decoration: none ;
    >
    > }
    >
    >
    >
    >
    > <asp:Menu ID="Menu1" runat="server" StaticHoverStyle-CssClass="ahover"
    > StaticDisplayLevels="3">
    > <Items>
    > <asp:MenuItem Text="File" Value="File">
    > <asp:MenuItem Text="New" Value="New"></asp:MenuItem>
    > <asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
    > </asp:MenuItem>
    > <asp:MenuItem Text="Edit" Value="Edit">
    > <asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
    > <asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
    > </asp:MenuItem>
    > <asp:MenuItem Text="View" Value="View">
    > <asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
    > <asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
    > </asp:MenuItem>
    > </Items>
    > </asp:Menu>
    >
    >
    > <a>zzz</a>
    >
    >
    >
     
    reader80.eternal-september.org, Jan 18, 2010
    #3
  4. Cal Who

    James Irvine Guest

    reader80.eternal-september.org wrote:
    > I only want to under line with Hover - not always.
    > Thanks



    If I understand you right, you never want the Menu items to underline,
    and the anchor tags to underline only if hovered on? If so:


    a:hover /* for any anchor tag -want to underline only when hovering */
    {
    font-size: larger;
    font-weight: bold;
    text-decoration: underline ;
    }


    ..ahover /* for the asp menu -never underline */

    {
    text-decoration: none ;
    }

    ..ahover:hover

    {
    font-size: larger;
    font-weight: bold;
    text-decoration:none;
    }
     
    James Irvine, Jan 19, 2010
    #4
  5. Cal Who

    Cal Who Guest

    I did try what you wrote but didn't think it would work and it didn't.

    I don't think .ahover:hover is ever effectice because asp:Menu has the
    property StaticHoverStyle-CssClass="ahover"

    so it has hover taken care of already.

    But thanks a lot.



    "James Irvine" <> wrote in message
    news:wE65n.22157$...
    > reader80.eternal-september.org wrote:
    >> I only want to under line with Hover - not always.
    >> Thanks

    >
    >
    > If I understand you right, you never want the Menu items to underline, and
    > the anchor tags to underline only if hovered on? If so:
    >
    >
    > a:hover /* for any anchor tag -want to underline only when hovering */
    > {
    > font-size: larger;
    > font-weight: bold;
    > text-decoration: underline ;
    > }
    >
    >
    > .ahover /* for the asp menu -never underline */
    >
    > {
    > text-decoration: none ;
    > }
    >
    > .ahover:hover
    >
    > {
    > font-size: larger;
    > font-weight: bold;
    > text-decoration:none;
    > }
     
    Cal Who, Jan 19, 2010
    #5
  6. Cal Who

    James Irvine Guest

    Cal Who wrote:
    > I did try what you wrote but didn't think it would work and it didn't.
    >
    > I don't think .ahover:hover is ever effectice because asp:Menu has the
    > property StaticHoverStyle-CssClass="ahover"
    >
    > so it has hover taken care of already.
    >
    > But thanks a lot.


    Does the following do what you are after? :

    http://mypichost.biz/anchorVSmenuUnderline.aspx

    The asp menu items are not underlined, even when hovered over.

    The <a> anchor tag is not underlined, unless you hover over it. Isn't
    that what you're trying to do?


    (It works in IE8, Firefox 3.5.7, and Opera. But Safari and Chrome still
    do display underlines on the Menus when hovered over.)
     
    James Irvine, Jan 19, 2010
    #6
  7. Cal Who

    Cal Who Guest

    "James Irvine" <> wrote in message
    news:cK85n.30512$...
    > Cal Who wrote:
    >> I did try what you wrote but didn't think it would work and it didn't.
    >>
    >> I don't think .ahover:hover is ever effectice because asp:Menu has the
    >> property StaticHoverStyle-CssClass="ahover"
    >>
    >> so it has hover taken care of already.
    >>
    >> But thanks a lot.

    >
    > Does the following do what you are after? :
    >
    > http://mypichost.biz/anchorVSmenuUnderline.aspx
    >
    > The asp menu items are not underlined, even when hovered over.
    >
    > The <a> anchor tag is not underlined, unless you hover over it. Isn't
    > that what you're trying to do?
    >
    >
    > (It works in IE8, Firefox 3.5.7, and Opera. But Safari and Chrome still
    > do display underlines on the Menus when hovered over.)


    Looks good. How did you do it?

    I was thinking I'd add a class to every <a element rather than using a as a
    selector.

    I see many things end up as anchors, calendar dates for example.

    I may have to make a class for each element type that becomes an anchor.

    But I'd love to try what you did first.
     
    Cal Who, Jan 19, 2010
    #7
  8. Cal Who

    James Irvine Guest

    Cal Who wrote:
    > "James Irvine" <> wrote in message
    > news:cK85n.30512$...
    >> Cal Who wrote:
    >>> I did try what you wrote but didn't think it would work and it didn't.
    >>>
    >>> I don't think .ahover:hover is ever effectice because asp:Menu has the
    >>> property StaticHoverStyle-CssClass="ahover"
    >>>
    >>> so it has hover taken care of already.
    >>>
    >>> But thanks a lot.

    >> Does the following do what you are after? :
    >>
    >> http://mypichost.biz/anchorVSmenuUnderline.aspx
    >>
    >> The asp menu items are not underlined, even when hovered over.
    >>
    >> The <a> anchor tag is not underlined, unless you hover over it. Isn't
    >> that what you're trying to do?
    >>
    >>
    >> (It works in IE8, Firefox 3.5.7, and Opera. But Safari and Chrome still
    >> do display underlines on the Menus when hovered over.)

    >
    > Looks good. How did you do it?
    >
    > I was thinking I'd add a class to every <a element rather than using a as a
    > selector.
    >
    > I see many things end up as anchors, calendar dates for example.
    >
    > I may have to make a class for each element type that becomes an anchor.
    >
    > But I'd love to try what you did first.


    One cool feature of css is you can define a specification for say, an
    anchor tag, and it will apply it to all anchor tags -and you don't have
    to touch any of your pages. In other words, you don't have to add a
    class or id to every <a> element in your code.


    Here's the complete source code of my little example:

    anchorHover.css
    ------------------------------------------------------------------------
    a:hover /* for ANY anchor tag -want to underline only when hovering */
    {
    font-size: larger;
    font-weight: bold;
    text-decoration: underline ;
    }



    ..ahover /* for the asp menu -never underline */

    {
    text-decoration: none ;
    }

    ..ahover:hover

    {
    font-size: larger;
    font-weight: bold;
    text-decoration:none;
    }
    ------------------------------------------------------------------------



    anchorVSmenuUnderline.aspx:


    <%@ Page Language="C#" AutoEventWireup="true"
    CodeFile="anchorVSmenuUnderline.aspx.cs" Inherits="anchorVSmenuUnderline" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Untitled Page</title>
    <!-- CSS Styles -->
    <link rel="stylesheet" type="text/css"
    href="css/anchorHover.css" media="screen" />
    </head>
    <body>
    <form id="form1" runat="server">
    <div>

    <asp:Menu ID="Menu1" runat="server" StaticHoverStyle-CssClass="ahover"
    StaticDisplayLevels="3">
    <Items>
    <asp:MenuItem Text="File" Value="File">
    <asp:MenuItem Text="New" Value="New"></asp:MenuItem>
    <asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
    </asp:MenuItem>
    <asp:MenuItem Text="Edit" Value="Edit">
    <asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
    <asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
    </asp:MenuItem>
    <asp:MenuItem Text="View" Value="View">
    <asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
    <asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
    </asp:MenuItem>
    </Items>
    </asp:Menu>

    <p>

    <a>zzz</a>

    </p>




    </div>
    </form>
    </body>
    </html>
     
    James Irvine, Jan 19, 2010
    #8
  9. Cal Who

    Cal Who Guest

    I added a new page with your code to my solution and put your css code into
    my css file and it worked fine.
    Then I added a contents page file using my master and your code and that
    worked too.
    So I figured the problem is that my anchor is in an accordian that has its
    own hover style.
    So I copied the anchor and pasted it outside the acordian and it still
    didn't work.
    This went on for a while - I never did fix my anchor but I managed to break
    yours by adding an href.

    What happens if you use the following:

    <a href="http://www.junk.org/">zzz</a>

    Still work for you?

    Thanks

    James Irvine wrote:
    > Cal Who wrote:
    >> "James Irvine" <> wrote in message
    >> news:cK85n.30512$...
    >>> Cal Who wrote:
    >>>> I did try what you wrote but didn't think it would work and it
    >>>> didn't. I don't think .ahover:hover is ever effectice because asp:Menu
    >>>> has the property StaticHoverStyle-CssClass="ahover"
    >>>>
    >>>> so it has hover taken care of already.
    >>>>
    >>>> But thanks a lot.
    >>> Does the following do what you are after? :
    >>>
    >>> http://mypichost.biz/anchorVSmenuUnderline.aspx
    >>>
    >>> The asp menu items are not underlined, even when hovered over.
    >>>
    >>> The <a> anchor tag is not underlined, unless you hover over it. Isn't
    >>> that what you're trying to do?
    >>>
    >>>
    >>> (It works in IE8, Firefox 3.5.7, and Opera. But Safari and Chrome
    >>> still do display underlines on the Menus when hovered over.)

    >>
    >> Looks good. How did you do it?
    >>
    >> I was thinking I'd add a class to every <a element rather than using
    >> a as a selector.
    >>
    >> I see many things end up as anchors, calendar dates for example.
    >>
    >> I may have to make a class for each element type that becomes an
    >> anchor. But I'd love to try what you did first.

    >
    > One cool feature of css is you can define a specification for say, an
    > anchor tag, and it will apply it to all anchor tags -and you don't
    > have to touch any of your pages. In other words, you don't have to add a
    > class or id to every <a> element in your code.
    >
    >
    > Here's the complete source code of my little example:
    >
    > anchorHover.css
    > ------------------------------------------------------------------------
    > a:hover /* for ANY anchor tag -want to underline only when hovering
    > */ {
    > font-size: larger;
    > font-weight: bold;
    > text-decoration: underline ;
    > }
    >
    >
    >
    > .ahover /* for the asp menu -never underline */
    >
    > {
    > text-decoration: none ;
    > }
    >
    > .ahover:hover
    >
    > {
    > font-size: larger;
    > font-weight: bold;
    > text-decoration:none;
    > }
    > ------------------------------------------------------------------------
    >
    >
    >
    > anchorVSmenuUnderline.aspx:
    >
    >
    > <%@ Page Language="C#" AutoEventWireup="true"
    > CodeFile="anchorVSmenuUnderline.aspx.cs"
    > Inherits="anchorVSmenuUnderline" %>
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >
    > <html xmlns="http://www.w3.org/1999/xhtml" >
    > <head runat="server">
    > <title>Untitled Page</title>
    > <!-- CSS Styles -->
    > <link rel="stylesheet" type="text/css"
    > href="css/anchorHover.css" media="screen" />
    > </head>
    > <body>
    > <form id="form1" runat="server">
    > <div>
    >
    > <asp:Menu ID="Menu1" runat="server" StaticHoverStyle-CssClass="ahover"
    > StaticDisplayLevels="3">
    > <Items>
    > <asp:MenuItem Text="File" Value="File">
    > <asp:MenuItem Text="New" Value="New"></asp:MenuItem>
    > <asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
    > </asp:MenuItem>
    > <asp:MenuItem Text="Edit" Value="Edit">
    > <asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
    > <asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
    > </asp:MenuItem>
    > <asp:MenuItem Text="View" Value="View">
    > <asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
    > <asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
    > </asp:MenuItem>
    > </Items>
    > </asp:Menu>
    >
    > <p>
    >
    > <a>zzz</a>
    >
    > </p>
    >
    >
    >
    >
    > </div>
    > </form>
    > </body>
    > </html>
     
    Cal Who, Jan 19, 2010
    #9
  10. Cal Who

    James Irvine Guest

    Cal Who wrote:
    > I added a new page with your code to my solution and put your css code into
    > my css file and it worked fine.
    > Then I added a contents page file using my master and your code and that
    > worked too.
    > So I figured the problem is that my anchor is in an accordian that has its
    > own hover style.
    > So I copied the anchor and pasted it outside the acordian and it still
    > didn't work.
    > This went on for a while - I never did fix my anchor but I managed to break
    > yours by adding an href.
    >
    > What happens if you use the following:
    >
    > <a href="http://www.junk.org/">zzz</a>
    >
    > Still work for you?
    >
    > Thanks


    Nope. But if you add this to the .css file it does:

    a
    {
    text-decoration: none ;
    }
     
    James Irvine, Jan 19, 2010
    #10
  11. Cal Who

    Cal Who Guest

    James Irvine wrote:
    > Cal Who wrote:
    >> I added a new page with your code to my solution and put your css
    >> code into my css file and it worked fine.
    >> Then I added a contents page file using my master and your code and
    >> that worked too.
    >> So I figured the problem is that my anchor is in an accordian that
    >> has its own hover style.
    >> So I copied the anchor and pasted it outside the acordian and it
    >> still didn't work.
    >> This went on for a while - I never did fix my anchor but I managed
    >> to break yours by adding an href.
    >>
    >> What happens if you use the following:
    >>
    >> <a href="http://www.junk.org/">zzz</a>
    >>
    >> Still work for you?
    >>
    >> Thanks

    >
    > Nope. But if you add this to the .css file it does:
    >
    > a
    > {
    > text-decoration: none ;
    > }


    Sure does.
    Is that the same as adding a:link ?

    Thnaks for staying with this. I appreciate it.
     
    Cal Who, Jan 19, 2010
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    7,859
    Marcus Harnisch
    Oct 30, 2006
  2. wallge
    Replies:
    2
    Views:
    558
    Derek Simmons
    Jan 5, 2007
  3. Chocawok
    Replies:
    19
    Views:
    676
    Mark Nicholls
    Jan 30, 2006
  4. Gina Engli
    Replies:
    0
    Views:
    295
    Gina Engli
    Jun 22, 2012
  5. Stefan Ram
    Replies:
    0
    Views:
    278
    Stefan Ram
    Jun 22, 2012
Loading...

Share This Page