Does anyone know how to make CSS link hover properties work for links that don't link to another html page or anchor?
For example this works:
Page1
Link
a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}
But the moment I change the link to something that's not an anchor or an html file, let's say a mailto:
<a href='mailto:bla#bla.com'>Send email</a>
It no longer changes color when I hover over the link.
Why is this?
You are overriding your own styles. Try
<style type="text/css">
a:link, a:visited
{
color: #555;
text-decoration: none;
}
a:hover, a:visited:hover
{
color: #fff;
text-decoration: none;
}
</style>
You don't need to do a:link, just a will do fine when defining your anchor tag style, however, if for some reason you do need it then you need to define your hover style more specifically than your link style.
a:link:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}
or
a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a,a:visited{
color:#555;
text-decoration:none;
}
will fix your problem
Related
I am using bootstrap 5 "text-muted" to grey out or dim the text. On hover, I would like to undo this effect on the text. I am able to make other effects for e.g. text decorations (underline) etc., on hover but not able to revert this effect. Is there a way to do this?
li a {
color: white;
&:hover {
text-decoration: underline;
}
}
<li class="nav-item mb-2">Home</li>
BS provides the .text-reset class which does what you want.
Since you are compiling from source you can just extend the class:
li a {
color: white;
&:hover {
#extend .text-reset;
text-decoration: underline;
}
}
Or,
If you look at the style rule you can see what declarations are needed:
.text-reset {
--bs-text-opacity: 1;
color: inherit!important;
}
And copy them to your rule:
li a {
color: white;
&:hover {
--bs-text-opacity: 1;
color: inherit!important;
text-decoration: underline;
}
}
You need to revert the color of the link (like the color of the body) when hovering it
.nav-item a:hover {
color: $gray-900 !important; // It is #212529
}
If you will see the default color of the body in the variables.scss file it is $gray-900
$body-color: $gray-900 !default;
I don't know if it's possible, or advisable even if it is. I'm using phpBB 3.2.3 I've replaced every instance of the word underline in styles/prosilver/theme/links.css with the word none. After doing that, I then changed the following line of code,
.postlink {
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 0;
}
to
.postlink {
text-decoration: none;
border-bottom: 0px solid transparent;
padding-bottom: 0;
}
And I changed the following code from styles/prosilver/theme/colours.css
.postlink {
border-bottom-color: #368AD2;
color: #368AD2;
}
.postlink:visited {
border-bottom-color: #5D8FBD;
color: #5D8FBD;
}
to
.postlink {
color: #368AD2;
}
.postlink:visited {
color: #5D8FBD;
}
I then purged the forum's cache and ctrl+f5'd my browser. Links now appear without an underline but only until I click, after which an underline appears. Is there any way for me to stop that underline from appearing? Or should I even try?
I found the answer elsewhere on this site!
I had to add the following line of code to the bottom of styles/prosilver/theme/links.css
a, a:hover, a:active, a:visited, a:focus {
text-decoration:none;
}
That did the trick! Now I'm not getting any underline at all!
I have a link that looks like this:
Документи
And problem is that in Safari when "Документи" is underlined, letter "Д" and "у" cut line and there is small white space in link line.
How to remove these white gaps in link?
Remove the underline for all <a> elements
In CSS you could do:
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
Remove the underline for only Cyrillic class
Or alternatively for only Cyrillic links:
a.cyrillic {
text-decoration:none;
}
a.cyrillic:hover {
text-decoration:none;
}
Here's a JSFiddle to clarify.
This removes the underline from the link. It's by no means perfect (if you wanted to retain the underline) but it at least solves the issue by removing it entirely. Of course, this assumes that your links are coloured somehow
border-bottom underline
It is possible to get the result you want using the CSS border-bottom style as such:
a.cyrillic {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
a.cyrillic:hover {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
And obviously on your HTML <a> element it should be:
Документи
Here's another JSFiddle to clarify.
I'm trying to use just a single color in jQuery progressbar, but it fill the whole div.
Here's the problem, i just use these functions.
$(document).ready(function(){
$("#progressbar").css({ "background": '#FF0000' });
$("#progressbar").progressbar({ value: 10 });
});
http://jsfiddle.net/jtf7M/1/
How do i make this fill properly, step by step?
CSS file is missing. Add http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css to your resources and it will be ok.
Edit:
If you don't want to load whole CSS file, just add this code in your page http://jsfiddle.net/jtf7M/21/:
<style>
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
.ui-widget-content {
border: 1px solid #AAA;
background: white;
}
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
-khtml-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-header {
border: 1px solid #AAA/*{borderColorHeader}*/;
background: #CCC;
}
</style>
I think there is no jQuery ui lib load on that jsfiddle.
But you are doing right.
http://jqueryui.com/progressbar/#animated
I have a lot of DIVs having some data in my web page & I want to print a data of a specific div by using "window.print()" without opening any popup. What should I do?
You must use CSS Media Types like this:
#media print {
#printable {
display:block;
overflow: visible;
}
#nonprintable {
display:none;
}
}
#media screen {
body, table, tr, td { font:12px Arial, Helvetica, sans-serif; }
.divStyles {
width:850px;
height:150px;
border: 1px solid #000;
background-color: #ccc;
padding: 15px;
}
}
I have created an example for you, see a demo: http://jsfiddle.net/rathoreahsan/Vuw6D/3/