Member Avatar for gahhon 
#user hl:hover {
  color: BlueViolet;
  text-decoration: underline; }



<asp:HyperLink ID="hlUsername" runat="server" NavigateUrl="~/Manager/ProfileView.aspx" CssClass="hl" />

While this hyperlink is hovered, the font is underline but font color not changing. Any problem with my code?

  • 4 Contributors
  • 5 Replies
  • 528 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by syeda_satwat

Dani AI

Generated

Brief recap and context: ultimately solved the issue by correcting the CSS selector so the hover rule actually matched the rendered anchor. and were right to point out that the ASP.NET HyperLink becomes a normal <a> in the browser and the stylesheet must target the final HTML. The rest of this note explains why the selector mismatch happens, how to verify which rule wins, and a short checklist for similar problems.

Why the selector difference matters: CSS selectors either target the same element (ID plus class on one element) or a descendant (an element inside another). If the selector doesn’t match the rendered DOM structure exactly, the browser never applies the hover rule. Even when a hover rule exists, other rules with higher specificity, inline styles, or later declarations can override it.

Quick verification and test (use devtools): open the page, Inspect Element on the link, and look at the Computed/Styles panel. That shows the final color value and the stylesheet rule that set it. A simple temporary rule such as the following confirms whether hover is being applied at all:

a:hover { color: rebeccapurple; }

Troubleshooting checklist (in order):

  • Confirm the rendered HTML and class/id attributes produced by ASP.NET; match the selector to that DOM.
  • Inspect computed styles to see which rule sets the color; note file and line number.
  • Look for inline styles or rules using !important or an ID selector that will beat a class selector.
  • Ensure link pseudo-classes aren’t accidentally ordered so a :visited rule overrides :hover; place :hover rules after :visited.
  • If a framework (Bootstrap, reset.css) is in use, add a more specific selector or move the rule to the end of the stylesheet; use !important only as last resort.
  • Check for accessibility/contrast issues and keyboard focus states as well.

Note: ’s profile-picture question is a separate task and is better served in its own thread (file upload, server-side save, and image resizing are typical steps).

Recommended Answers

All 5 Replies

Member Avatar for Dani

I don't know ASP. What does the link look like? It looks like you're creating something that looks like this:

<a href="~/Manager/ProfileView.aspx" id="h1Username" class="h1">

If that's the case, you'll want to change the first line of your CSS to be: a#h1Username:hover or a.h1:hover.

Member Avatar for gahhon

it still the same displaying in black color.

Member Avatar for JorgeM

-yes you are correct. Its actually ASP.NET not ASP. But anyway, the hyperlink control is rendered as an anchor element.

Here is the HTML markup produced by the code above, asuming that the Text property was not assigned in the asp.net server side code. ASP.NET server and web controls allow you to access certain properties code-behind which is really convenient.

<a id="hlUsername" class="hl" href="Manager/ProfileView.aspx"></a>

- The selector you are using in the first examle is referencing an element with an ID="user". Where is this element? is the hyperlink within this element such as a div.

Try this full example...

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo</title>
    <style>
     #user .hl:hover {
     color: BlueViolet;
     text-decoration: underline;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
       <div id="user">
             <asp:HyperLink ID="hlUsername" runat="server" NavigateUrl="~/Manager/ProfileView.aspx" CssClass="hl" Text="Profile View" />
       </div>
    </form>
</body>
</html>

If there is no #user element, change the selector to what Dani suggests above. It depends on what else is in your HTML markup, assuming there is more code that you did not include.

Edited by JorgeM
Member Avatar for gahhon

i did that in css but i wrote in #user.hl:hover instead of #user .hl:hover
which mean i didn't space between them thus it cause me fail to change color.
Now it work by adding a space between them. Thanks

Member Avatar for syeda_satwat

please any one tell me how to change profile picture like facebook in Asp.net using C#

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.