I am styling the .button1 class with its own ruleset. Additionally, I have a separate ruleset for the :hover pseudo-class using the CSS selector .button1:hover
But I wish to define the :hover pseudo-class styling within the existing .button1 ruleset.
Currently:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
Desired:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
hover:background-color: #4CAF50;
}
Is it possible to do anything like this?
Here is link https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover
CSS
This is impossible to do with pure CSS. :(
.button1 and .button1:hover are different CSS selectors.
With CSS, if you want to apply unique styling to the hover-state, then it must have a separate ruleset:
.button1 { background: red; }
.button1:hover { background: pink; }
CSS preprocessors
However, there are a handful of CSS preprocessors that allow us to write style-rules using special syntaxes that allow nesting similar to what you wish to accomplish.
For instance, here is "SCSS" syntax that the Sass preprocessor uses:
.button1 {
background: red;
&:hover {
background: pink;
}
}
On their own, these intermediate syntaxes will not run in the browser, so in the end, a special interpreter (preprocessor) must be used to "process" and translate the special syntax into real CSS that the browser can actually load.
Some popular preprocessors:
Sass
Less
Stylus
PostCSS
If you want to add hover to any class the format is
You can not add it inside .button class
.button1:hover{
background-color: #4CAF50;
}
Here is an example to get hovering effect -
<style>
.btn{
/* Style your button */
}
.btn:hover{
/* Add hovering effect to your button */
}
</style>
<button class="btn">Green</button>
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 WordPress so I wrote the custom color to change the background color of the box on hover but it's not working
#project1 {
height: 100px;
width: 33.33%;
background-color: red !important;
}
#project1:hover {
background-color: blue;
color: white;
}
<div id="project1"></div>
The !important rule is not being overwritten by a new rule that does not have !important.
Either remove !important from the first declaration, or if you absolutely have to keep it there, add it also to the :hover declaration.
#project1 {
height: 100px;
width: 33.33%;
background-color: red !important;
}
#project1:hover {
background-color: blue !important;
color: white;
}
<div id="project1"></div>
Try Removing !important from first rule
#project1{
background-color: red;
}
#project1:hover {
background-color: blue;
color: white;
}
Also, tend to avoid putting !important, rather do the override with better combination of parent selectors.
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;
}
}
<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 need some 'derivative' css which is a child of my parent css. I want to import all of attributes of 'parent' css to my 'child' css.
I can't find a solution.
E.g.
.red {
color: red;
}
.more_red {
color: red;
border: 2 px solid red;
}
Is it possible to do something familar my pseudocode?
.red{
color: red;
}
.more_red <SOME TEXT WHICH SAYS 'THIS CSS IS A CHILD OF .red'>{
border: 2px solid red;
}
HTML
<p class='more_red'>texty text</p> <- this only I Need
<p class='red more_red'>texty text</p> <- not this
EDIT I need to create a css which consists of all of 'parent' css properties.
Only way to inherit/importing the styles defined in one rule to another in CSS is cascading. You cannot use extend as in LESS in CSS.
For inheriting the properties from other element, the parent-child hierarchy is necessary.
You can use direct child selector >
.red {
color: red;
}
.red > .more_red {
border: 2px solid red;
}
or descendant selector
.red .more_red {
border: 2px solid red;
}
By doing this, the styles of parent are inherited by children.
You can also use global selector *.
Ex. For setting the font-family across the site
* {
font-family: Helvetica;
}
You can also use element/type selector.
Ex. To set the style of all the anchors
a {
text-decoration: none;
color: #ccc;
}
a:hover {
text-decoration: underline;
}