I'm trying to make an :active style on my "a" tags, but on a mobile phone it's not the same, that I wrote.
I have done the following:
a {
display: block;
background-color: lightblue;
width: 100px;
color: black;
}
a:active {
background-color: skyblue;
}
It should do the following:
Have "a" tags, that are have a light blue background and when I tap on it it's background color change to sky blue. Yes it happens, BUT if I add a href="ANYTHING", then, when I tap on it it's background color is a bit darker, than sky blue, and the text's color changes to a bit blueish.
Sorry for my English, I tried my best.
You probably need to set custom styles for the rest of the pseudo classes that are related to the element: https://developer.mozilla.org/en-US/docs/Web/CSS/:link
Try adding visited to the list like this:
a:active, a:visited {
background-color: skyblue;
}
Related
Each of the links on my website has a unique color, which is defined within the style argument within each <a> tag. I want to be able to change the background color of each link on the page to aqua and change the text color to white on hover. However, because of the separate color per link, the text color does not change and is overwritten. How can I get around this?
Here is my code:
a {
color: black;
}
a:hover {
background-color: aqua;
color: white;
}
About<br>
How this site was made<br>
Upcoming Changes & Changelog<br>
Edit: To clarify, I want the links to remain the color they are, but I want them to change to white on hover, and change back on non-hover. The highlight color change already works.
Use CSS variables instead of inline color so you don't have to deal with !important and specificity issues:
a {
color: var(--c,black);
}
a:hover {
background-color: aqua;
color: white;
}
About<br>
How this site was made<br>
Upcoming Changes & Changelog<br>
You can use the !important property so it overrides the inline style
a {
color: black;
}
a:hover {
background-color: aqua;
color: white !important;
}
About<br>
How this site was made<br>
Upcoming Changes & Changelog<br>
Use the !important property to override all other declarations:
a {
color: black;
}
a:hover {
background-color: aqua;
color: white !important;
}
About<br>
How this site was made<br>
Upcoming Changes & Changelog<br>
My site currently has got red color for highlighting the menu on mouse over and black color by default. Please see my website here. Is it possible to change this color so that it can be matched with the logo. i.e light blue on mouse over and dark green as default. Can it be done using custom css code? (I have used the theme Awaken)
Thanks!
Yes you can change it with this css.
.main-navigation {
background: #ADD8E6;
color: #000;
}
.main-navigation a:hover {
background: darkgreen;
}
And for current tab use this selector
.main-navigation li.current-menu-item {
background: pink;
}
I've got a common button set in my css. Also 've got a hover set to it.
.myBtn {
background-color: #f60;
border: none;
font-size: 12px;
}
.myBtn:hover {
background-color: #fff;
}
.myBtn is mostly on a black background, so the button is visible on hover state. But when .myBtn is on a white background, the button disappears because .myBtn hover color and the page background colour are the same.
My question is it possible to use .myBtn for all buttons create 2 different hover states?
e.g.:
.myBtn:hover1 {
background-color: #fff;
}
.myBtn:hover2 {
background-color: #000;
}
No, two hovers on one class won't work. Also when you declare two after each other, the stylesheet will be read cascade, so only the last will apply.
A possible solution would be to add an extra class.
.myBtn {
background-color: #f60;
border: none;
font-size: 12px;
}
.myBtn:hover {
background-color: #fff;
}
.myBtn.onWhite:hover {
background-color: #000;
}
Then you'll only need to add an extra class on the buttons on a light background <button class="myBtn onWhite">.
It is not possible to create 2 hover effects for a same class. You can either use a different class and provide hover to that or use jQuery to provide that effect.
In what way do you change the background color? By hard coding your background-color? Or it's already written in two classes that when you trigger something, the html code will change the class name and thus the background?
If it's hard code I'm afraid you have to hard code the Btn class as well. But if it's triggered by something you can have another Btn class name and will be triggered together with background color.
I have html table and layout for it (something like that, also i use haml+sass):
.zebra{
.zebra-stripe{
&.zebra1{
a{
color: red;
}
a:hover{
color: blue;
}
}
}
my htm table has class zebra, and tr has class .zebra-stripe .zebra1
but there i have link with other style (like button) and this link has own height with background, but color is setted to orange on hover,
.details-link{
width: 70px;
margin: 2px;
}
.details-link:hover{
color: orange;
}
but when my mouse is over this link it's color is not orange, but blue as setted for table.... what is wrong?
How to set link hover text color to orange (i setted it, but it is not viewing properly)....
If something is not clear write me in comments...
You problem is the specificity of the selectors you're using, .zebra .zebra-stripe.zebra1 a:hover is more specific than .details-link:hover. Try the following instead to make your selector more specific:
.zebra .zebra-stripe.zebra1 a.details-link:hover {
color: orange;
}
Try out this:
a.details-link:hover{
color: orange;
}
I am using a bit of HTML in my IPhone application. I don't have much idea about HTML.
When we touch any hyperlink(ahref in HTML) there is a blue selection color that appears in "li" which contains ahref. How can we disable it?
You can override the behaviour by specifying your custom color for links via css:
a { color:green; }
Or based on their status eg active, clicked, etc:
a:active { color:green; }
a:visited { color:red; }
a:hover { color:orange; }
I'm not 100% sure, but if the text is truly being selected, and you're seeing a blue color, then the fix would be to apply a style like this:
li::selection {
background-color: transparent;
}
li::-webkit-selection {
background-color: transparent;
}
li::-moz-selection {
background-color: transparent;
}
That's only if it truly is a selection that's occuring. Mind you, only the ::selection and maybe the :-webkit-selection could possibly apply to an iPhone. ::-moz-selection would be for a Firefox browser.