a:hover and ahover are coupled

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
 
J

James Irvine

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

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>
 
J

James Irvine

reader80.eternal-september.org said:
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;
}
 
C

Cal Who

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.
 
J

James Irvine

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.

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

Cal Who

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

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.
 
J

James Irvine

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.

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>
 
C

Cal Who

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
 
J

James Irvine

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

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

a
{
text-decoration: none ;
}
 
C

Cal Who

James said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,906
Latest member
SkinfixSkintag

Latest Threads

Top