a:hover and ahover are coupled

  • Thread starter Thread starter Cal Who
  • Start date Start date
C

Cal Who

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 said:
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
Click to expand...

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 said:
I only want to under line with Hover - not always.
Thanks
Click to expand...


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;
}
 
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.
 
Cal said:
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.
Click to expand...

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 said:
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.)
Click to expand...

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 said:
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.
Click to expand...

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>
 
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
 
Cal said:
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
Click to expand...

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

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

a
{
text-decoration: none ;
}
Click to expand...

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

Thnaks for staying with this. I appreciate it.
 
Back
Top