Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Newbie here: Need help with my Table Row with hyperlink data highlight on hover

Posted by: xaelxaelxael Aug 1 2022, 11:09 AM

So I have this table, when I hover on anything except on the Account Name column, everything is highlighted in BLUE except the respective Account Name.

It only changes to BLUE when I hover on the Account Name.

NOTE:
The account name is a hyperlink.

HTML excerpt:
<tr class="bl-hlt">
<td>03/22/2022</td>
<td>2642252</td>
<td>
<a id="link" href="#">Right Time Logistics DBA RTT Transport</a>
</td>
<td>CA</td>
<td>11 Western</td>
<td>06/25/2022</td>
<td>3</td>
<td class="val-holder">
<span class="dollar-sign">$</span> 58,500
</td>
</tr>

CSS excerpt:

BLUE HIGHLIIGHT ON HOVER
.user-list-wrap table tr.bl-hlt:hover td {
-webkit-text-stroke: 1px #101EE6 !important;
}

HYPERLINK FORMATTING
a:-webkit-any-link {
color: black;
cursor: pointer;
text-decoration: none;
}
a:hover {color:#101EE6;}

Thanks in advance!

Posted by: Christian J Aug 1 2022, 02:10 PM

QUOTE(xaelxaelxael @ Aug 1 2022, 06:09 PM)

when I hover on anything except on the Account Name column, everything is highlighted in BLUE except the respective Account Name.

Which browser are you using? Sounds like it doesn't support the -webkit-text-stroke property on links. In my Windows browsers it seems to work though.

QUOTE

It only changes to BLUE when I hover on the Account Name.

NOTE:
The account name is a hyperlink.

That should be because the a:hover rule changes the ordinary color property, not the text-stroke-color.

Non-standard CSS properties like https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke or https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link may not work in all browsers, or may work in non-standard ways, so it's best to avoid using such properties unless testing thoroughly.