I have a link which has a small drop down arrow after it, added using :after.
What I want to do is change the color of the arrow when I hover over the link, is this possible?
This is what I'm trying but doesn't work:
.detail__changer {
color: #333;
cursor: pointer;
text-decoration: underline;
font-size: 33px;
}
.detail__changer:after {
color: #333;
content: ' ▾';
}
~ .detail__changer:hover:after {
color: red !important;
}
Here's a fiddle
Also, I have seen this question, my question is not the same
Remove the tilde
.detail__changer {
color: #333;
cursor: pointer;
text-decoration: underline;
font-size: 33px;
}
.detail__changer:after {
color: #333;
content: ' ▾';
}
.detail__changer:hover:after {
color: red !important;
}
<div class="detail__changer">Hover over me</div>
Related
I'm working on a project for school, and I wanted the three links I have to be set to the different colors I need. But when I call a class in my CSS file, I'm told:
Unknown property 'a'. Expected RBRACE at line 12, col 11.
How can I set different classes so that my different links are different colors? Below is my CSS code.
body {
background-color: white;
color: black;
src: url('PressStart2P-Regular.ttf') format('truetype');
font-family: Times;
}
.colorlink {
/* unvisited link */
a:link {
color: darkred;
text-decoration: underline;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: powderblue;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
}
you are using a inside .colorlink selector , so it saw it as a property not a selector , thus its Unknown , you cannot nest selectors in css
what you can do instead is use multiple selectors like this :
a.colorlink:link {
color: darkred;
text-decoration: underline;
}
/* visited link */
a.colorlink:visited {
color: green;
}
/* mouse over link */
a.colorlink:hover {
color: hotpink;
}
/* selected link */
a.colorlink:active {
color: powderblue;
}
a.colorlink:link {
text-decoration: none;
}
a.colorlink:visited {
text-decoration: none;
}
a.colorlink:hover {
text-decoration: underline;
}
a.colorlink:active {
text-decoration: underline;
}
to only remove a style
a {
color : inherit ;
text-decoration : none ;
}
The error appears because it is not possible to use nested styles in pure CSS. Thus CSS thinks you are trying to a CSS-Property to .colorlink. Use a preprocessor like SCSS for that.
Besides, I assume you are trying to achieve something similar like this:
body {
background-color: white;
color: black;
font-family: Times;
}
.link1 {
color: green;
}
.link2 {
color: red;
}
.link3 {
color: blue;
}
a:visited {
color: green;
text-decoration: none;
}
a:hover {
color: hotpink;
}
a:active {
color: powderblue;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
My Link
My Link
My Link
This question already has answers here:
SCSS: parent hover selector
(2 answers)
Closed 2 years ago.
I can't figure out why my .notes-list__item__contents isn't getting a white color on .note-list__item:hover... What am I doing wrong with my selector? I couldn't find similar case in the docs.
.notes-list {
list-style-type: none;
margin: 0;
padding: 0;
&__item {
padding: 30px;
background-color: $secondary-color;
border-radius: 15px;
margin-bottom: 15px;
&:hover {
background-color: $accent-color;
color: #fff;
&__contents { color: #fff; }
}
&__title {
font-size: 1.125rem;
font-weight: 600;
}
&__contents {
margin-top: 20px;
color: $text-color;
font-weight: 500;
}
}
}
<li className="notes-list__item">
<div className="notes-list__item__title">Title</div>
<div className="notes-list__item__contents">
Some contents
</div>
</li>
Having this doesn't feel quite scss
&:hover {
.notes-list__item__contents { color: #fff; }
}
So i checked your output css and its resulting in below css
.notes-list__item:hover__contents {
color: #fff;
}
As you can see its suffixing contents after the hover pseudo element.
you have to write like this in case of nested hover
&:hover &{
background-color: green;
color: #fff;
&__contents { color: #fff; }
}
This will generate below CSS
.notes-list__item:hover .notes-list__item__contents {
color: #fff;
}
I'm creating clickable CSS buttons for my website and want a green button with a white text. But my default link color (blue) is overriding everything and making the buttons with a green background but underlined blue link. What do I need to change?
.td-post-content a {
color: #2200CC;
text-decoration: underline;
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 24px;
margin: 4px 2px;
cursor: pointer;
}
.button a:link {
color: white;
}
<p style="text-align: center;"><a class="td-post-content button" href="https://www.expatkings.com/join">Join Now</a></p>
I except the td-post-content links to be blue and underlined while the button links should be green with white text.
I guess you can just add all css pseudo classes that work with "a" tag:
https://css-tricks.com/snippets/css/link-pseudo-classes-in-order/
https://www.w3schools.com/css/css_pseudo_classes.asp
.button,
.button:link,
.button:visited,
.button:hover,
.button:active{
color: white;
background: green;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
}
<a class="button" >Name</a>
Try using !important. This will override the standard link color.
.button{
color: white !important;
}
:link works for elements with a href attribute that has not yet been visited.
If you wish to style all states of the link, use the following:
.button a {
color: white;
}
i've tried all of the top resolutions here, but so far have only been able to change the highlight color behind the button text and not the entire button. i'm trying to change the hover state color to a yellow hex on a youcanbook.me calendar, but only have access to css updater, not the source code... any thoughts? edit: developer's code for new themes is here --> youcanbook.me/design_guidelines
.gridPage .gridDays .gridDay div.gridNoFree:not(.gridTechnicallyFree):not(.gridHighlight) {
display: none;
}
div.showTechnicallyFree div.gridTechnicallyFree {
background-color: transparent;
text-decoration: line-through;
font-size: 12pt;
color: #444;
}
div.gridHighlight {
color: #fff;
text-decoration: none;
}
div.gridBusy {
display: none !important;
}
div.gridTechnicallyFree {
display: none !important;
}
.gridPage .gridDays .gridDay div.gridNoFree {
display: none;
}
.gridPage .gridDays div.dayNoFree {
display: none;
}
div.gridHighlight {
background-color: #ffdf00
}
div.gridSlot:not(.gridBusy):hover {
background-color: #ffd700;
}
Please check out my fiddle:
http://jsfiddle.net/zzh0ym2m/1/
Once I click on a menu button "Home", "Settings", and so on, the font should be changing to white, but it doesn't. I cannot figure out where the error is located, after trying to change stuff around. It should be turning white:
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedorange {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#fdc652, #dba439)
}
It seems that this
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
is overriding any other settings.
So you need to address that..perhaps with
.topmenu-ul > [class*=topmenu-selected] > a{
color: #fff;
}
That said, there is some repetition and very specific selectors in your CSS that could be tidied up that might make it simpler.
JSFiddle Demo