I can't remove the underline on hover on this page:
http://www.studyroomguides.net/?page_id=19
I have tried adding:
.a:hover{
text-decoration: none;
}
I'd like the underline to be removed on hover.
Remove the . before a:hover. The . symbol indicates a CSS class, but a is an element (a stands for anchor), not a class name. It should be: a:hover { text-decoration: none; }.
It's because there is no text decoration on hover.Look closely and you will notice that on hover it's border-bottom.Remove that border and you'll be fine.
This is your css on hover:
.entry-content a:hover{
border-bottom-color: #424242;
}
Related
I've tried everything I could to remove the underline that appears when hovering over a product title on my Shopify. Any css suggestions as to how I can remove this underline anywhere that a product title appears?
Thank you!!!
**Try these two**
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Yeah. I had encountered this issue before. Just use below code snippet:
.site-nav__link:hover span.site-nav__label { border-bottom: none; }
From my code snippet. Just replace it with your div
So, I need to remove a visited link coloring from my navigation bar, as it will look ugly.
I have tried to use text-decoration: none; and color: white; but that does not seem to help it.
CSS for navigation
Actual code
I removed the actual links from the code, in the real version there is link but for this question links are replaced with #
In addition to Bariock's answer, this will help reset your <a> links in all circumstances to your specified css.
a:visited, a:hover, a:active, a:focus {
color: yourColor !important;
text-decoration: none !important;
outline: none !important;
}
The !important signifies that it has a higher precedence than that of other rules declaring the same values for the same selectors. Note: you can still style them separately such like you would with :hover.
a:visited{
color: your-color;
}
I edited the <a> tag to go around the <button> so the text is back to white now and the button actually works. It is no longer just "click text to visit link" the whole button works.
<button class="dropbtn">Community</button>
Try adding a !important to the end of the css styles like so:
a {
color: white !important;
}
Hope this helps!
I recommend you first set the style of the link tag, for example:
.dropdown a{ color:#fff }
now your text links inside the container with the class .dropdown will be as white color. Then you don't need to set a visited link color, unless you want to set it.
If you want to get rid the underline in the link, your style will be like this:
.dropdown a{ color:#fff; text-decoration: none; }
When I hover over the 'Read my story' button in my about section on my homepage (https://howtogetrippedathome.com/), something strange happens.
When I hover the side of the button, only the button as a whole changes to red (but the text doesn't turn white). When I quickly hover over the text in the button, the text and the background of the text chagne color, but the rest of the button just slightly after.
I have read dozens of posts and tried everything, but I cannot make it work. I think it has to do with the element I am targeting, but I don't know how to do it right.
I use the following code:
.so-widget-sow-button .ow-button-base :hover {
color: #fff;
background-color: #ff2828;
transition: 0.5s;
}
Help is very much appreciated, as I am kind of lost by now.
I found this css in your stylesheet:
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:visited,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:active,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover {
color: #ff2828 !important;
}
which as you can see forces the text color of hovered links inside ow-button-base as red. Removing the a:hover line solves the conflict; I was able to solve the problem also adding this css:
.ow-button-base a.ow-icon-placement-left:hover {
color:white !important;
}
1) Remove the colors from the span, because you need the hover to be an your a tag to change
.so-widget-sow-button .ow-button-base :hover {
color: #fff; *--->remove this*
background-color: #ff2828;
transition: .3s; *---> change transition with 0.3s as it is on your a tag*
}
2) Add the new hover on your a tag an change to color of the span
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover span {
color: #fff;
transition: .3s;
}
3) Remove !important from the styling of the anchor tag
This is the problem
so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover {
color: #ff2828 !important;
}
It's overriding the color you put here.
.so-widget-sow-button .ow-button-base :hover {
color: #fff; <--- This one
background-color: #ff2828;
transition: .5s;
}
Make it stronger and/or remove the !important
this is because you have used color important in hover state of anchor,
please try below css that will resolve your issues.
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover > span{color:#fff}
You have to change the "a" tag color with .ow-button-base:hover selection
.ow-button-base:hover > a
{
color:#fff;
}
and also remove
color:#ff2828 !important
I've changed the color of my text when it's highlighted/selected, but I've just noticed that text-decorations are still black.
I added text-decoration-color: #fff to my ::selection css but it didn't take effect, does it need to be done another way?
My CSS is:
::-moz-selection {
background: rgba($colorRed, .85);
color: #fff;
text-decoration-color: #fff;
}
::selection {
background: rgba($colorRed, .85);
color: #fff;
text-decoration-color: #fff;
}
The text decoration will only work if is already styling an element.
text-decoration, on ::selection will only work on elements that have the same decoration properties set already.
p{
text-decoration:underline overline transparent;
}
::selection{
text-decoration: underline overline red;
background:green;
}
<p> SELECTED TEXT WILL DIFFER THAN UNSELECTED BE UNDERLINED</p>
text-decoration on selection is possible
I am sorry but changing text-decoration-color within a ::selection selector is not possible. Only color, background, cursor, and outline can be styled.
During my research I could not figure out how to apply outline styles on selection, but that was not your problem anyway W3C Schools
I have some HTML markup in my ASP.NET master page representing a basic navigation menu. THree words that link to three pages. My CSS and HTML are included below for your reference.
When I load the page, the links appear with the correct color (red). If I hover over a link, the link changes to the correct color (blue). So far, we're good. Clicking a link changes the link color to the correct color (yellow). The two remaining links are still red / blue as expected. Clicking a second link changes that link to yellow also. Now I have two yellow links. Neither yellow link displays the hover color (blue) like I'd prefer. Clicking the third link causes it to be yellow, too and none of the links display the hover style.
Although a link has been clicked, I'd like the color to be stored and have the hover color displayed. How do I accomplish this? This is an ASP.NET web application project but I'm only using straight HTML at this point.
/* --- css --- */
a:link
{
color: red;
text-decoration: none;
}
a:hover
{
color: blue;
text-decoration: none;
}
a:active
{
color: green;
text-decoration: none;
}
a:visited
{
color: yellow;
text-decoration: none;
}
/* --- HTML --- */
<p class="MenuItems">
Cars.
Trucks.
Vans.
</p>
As described here, the :hover declaration must come AFTER the :visited and :active declarations.
Basically, in the cascade of your current styles, you won't ever see the :hover color.
Your
a:hover
declaration must come after your
a:visited
declaration in the stylesheet because the visited state is currently taking priority. Always put hover at the end of the a styles declaration block to prevent this.
a:link -> a:visited -> a:active -> a:hover is the optimal ordering.
Just use this:
a:hover
{
color: blue ! important;
text-decoration: none ! important;
}
or as described - use this order:
a:link
{
color: red;
text-decoration: none;
}
a:active
{
color: green;
text-decoration: none;
}
a:visited
{
color: yellow;
text-decoration: none;
}
a:hover
{
color: blue;
text-decoration: none;
}