I was wondering when I worked on a project if I could achieve this, but assuming it does not seem currently possible to get this behavior without any change of structure (I would really like to keep the hover inside its own class declaration), to you, what would be the cleanest solution ?
LESS
#blue: blue;
#blue-darker: darken(#blue, 20%);
.text-blue {
color: #blue;
/* something like that */
&:hover when (element_reference == hyperlink) {
color: #blue-darker;
}
}
CSS
.text-blue {
color: blue;
}
/* something like that */
a.text-blue:hover {
color: #000099;
}
HTML
<p class="text-blue">Text in blue with no hover effect</p>
<a class="text-blue" href="#">Link in blue with hover effect</a>
This should do what you want:
.text-blue {
color: #blue;
a&:hover {
color: #blue-darker;
}
}
Fiddle
I would use a :link CSS pseudoclass, because <a> without href is not treated as a hyperlink. See at https://jsfiddle.net/jsqdom1s/
.text-blue {
color: #blue;
a&:link:hover {
color: #blue-darker;
}
}
Related
Say I have this custom button:
<div class="button-container">
<p class="button-text">Click me</p>
</div>
I want the div to have a background color, and the text to have a color in SCSS.
But I also need a different background color and text color when I'm hovering the whole div (not just the p tag and div separate, only when hovering the div)
I could write something like this:
div.button-container{
background-color: white;
p{
color: black;
}
&:hover{
background-color: red;
p{
color: blue;
}
}
}
But this does not look like a good idea, since this will become very complex and hard to manage if there are more elements involved. What is the best solution here?
I don't know exactly what the code I want would look like since I'm pretty new to SCSS, but I am thinking it would look something like this: (ignore syntax here, just an idea of how much shorter I would like it to be)
div.button-container{
background-color: white, red;
p{
color: black, blue;
}
}
Based on the html you have provided the following scss will be just fine:
.button-container {
background-color: black;
color: white;
&:hover {
background-color: gray;
color: black;
}
}
If there are several items involved, you can create some mixins that can be reused. For example. if there are several button-container elements that share the same style in the app, I will make something like this:
#mixin btnContainerBlack {
background-color: black;
color: white;
&:hover {
background-color: gray;
color: black;
}
}
In this case, you will simply add the mixin name to the element style:
.button-container {
#include btnContainerBlack;
}
There are many ways to make scss more clean and reusable. This is just one of the ideas.
I am using firebase authUI. Here is a demo: Click on Sign in with Email
I try to change the color of the 'blue' underline that is appearing when clicking in the input field. But I just can't figure out which element in the css I would need to change. I tried almost everything but I am missing something here. Maybe someone has an idea for me?
I only found out how to change the color of this border when it is not clicked:
.firebaseui-textfield.mdl-textfield .firebaseui-input {
border-color: rgb(209,74,74);
}
If you add the class .is-focused manually to the div which contains the input and label.
That will force the focus state which you can inspect and modify the source accordingly.
I had a look myself, and if you want to change the border color, then add this...
.firebaseui-textfield.mdl-textfield .firebaseui-label::after {
background-color: magenta;
}
Change the color as you wish. You might need to use important to override it.
For Ionic users, place it at the end of your variables.scss file.
Don't forget the !important keyword.
Example to change buttons, text border, progress-bar and links color:
.progressbar {
background-color: var(--ion-color-primary) !important;
}
.mdl-button--raised.mdl-button--colored {
background-color: var(--ion-color-primary) !important;
}
.mdl-button.mdl-js-button.mdl-button--primary {
color: var(--ion-color-primary) !important;
}
.firebaseui-textfield.mdl-textfield.firebaseui-label::after {
background-color: var(--ion-color-primary) !important;
}
a.firebaseui-link {
color: var(--ion-color-primary) !important;
}
.progressbar {
background-color: var(--ion-color-primary) !important;
}
.bufferbar {
background-image: none !important;
background-color: var(--ion-color-secondary)
}
.auxbar {
background-image: none !important;
background-color: var(--ion-color-primary) !important;
}
Result:
i am trying to make a website, but for some reason i am stuck on the hover. I knew how to do this, but i thing i forgot something.
What i want is that when i hover over the black bar the black turns into white so you can see the text.
This is my code:
div.spoiler1:hover div.spoiler1 {
background-color: white;
}
<div style='display:inline; background-color: black;' class='spoiler1'>hey</div>
I also tried this css:
spoiler1:hover spoiler1 {
background-color: white;
}
div.spoiler1:hover,.spoiler1 {
background-color: white;
}
spoiler1:hover {
background-color: white;
}
Good efforts. The issue is that the inline style overrides the sheet. In general, don't use inline styles (hard to debug/maintain, not reusable):
div.spoiler1 {
background-color: black;
display: inline;
}
div.spoiler1:hover {
background-color: white;
}
<div class='spoiler1'>hey</div>
See this JSFiddle.
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I have a question and I am not sure if it is possible, but I thought I would try asking.
Say I had three div's:
<div id="parent_div">
<div id="child_div_1">Blue</div>
<div id="child_div_2">Red</div>
</div>
If all text inside parent_div is set to black, how would I make the child_div_1 and child_div_2 change font-color to blue and red respectively, when the parent div is hovered over?
Sorry if this is a bit confusing, but is there a way to do this preferably with CSS only?
#parent_div:hover #child_div_1 {
color: blue;
}
#parent_div:hover #child_div_2 {
color: red;
}
Just target the relevant child elements based upon the :hover state of the parent:
/* defaults */
#parent_div div {
color: #000; /* or whatever... */
}
/* hover rules */
#parent_div:hover #child_div_1 {
color: blue;
}
#parent_div:hover #child_div_2 {
color: red;
}
JS Fiddle demo.
Use the :hover pseudo-class on the parent element:
#parent_div { color: black; }
#parent_div:hover #child_div_1 { color: blue; }
#parent_div:hover #child_div_2 { color: red; }
Demo: http://jsfiddle.net/Guffa/M3WsW/