I have a div with a :hover pseudo-class that applies many CSS effects to indicate to the user that they are hovering over it.
How do I disable the CSS effect when the user hovers over it by adding a .disable class?
http://jsfiddle.net/nQUSn/1/
For all browsers except IE < 9:
Change .a:hover { to .a:not(.disable):hover {
You could create a selector a.disable:hover that resets the styles on that anchor element. For example, if your a:hover css was:
a:hover {
color: red;
}
And the link color is normally blue, your disable CSS could look like:
a.disable:hover {
color: blue;
}
no need to use the ".disable" class. You can chain the :disabled pseudo-class with the :hover pseudo-class:
elem {
color : blue;
}
elem:hover {
color : lightblue;
}
elem:disabled, elem:disabled:hover {
color : grey;
}
Related
How can I target the underlying html textarea of a vuetify v-textarea with css? In my case I want to change the line-height, font-family, color and more of the v-textarea. It doesn't work like this:
<v-textarea class="custom-textarea"></v-textarea>
.custom-textarea {
line-height: 1;
color: red;
}
I also tried several other selectors like v-textarea, .v-textarea, v-text-field__slot but none of these worked either. What is the right selector for the textarea?
In order to override a deep element, you need to access the element through deep selectors like
::v-deep .v-textarea textarea
More information about deep selectors
.custom-textarea textarea {
line-height: 1;
color: red;
}
Set id prop of text-area and apply css style by id.
<v-textarea id="input-7-2"></v-textarea>
#input-7-2 {
color:white;
background-color: green;
line-height:1;
}
Codepen demo
I am using Wordpress and have the following code to style my menu items
css (the attributes I'm looking to change)
.main-nav li a {
color: #222;
}
.main-nav li a:after {
background-color: #d11e5d;
}
I have applied a custom class .btn-contact on one of the buttons so I can override its color and other attributes but I can't seem to target it. (using .btn-contact { color: red; } or .btn-contact { color: red !important; } doesn't work )
the output
Just add
.btn-contact {
color: red !important;
}
The !important should override every other value for the same property.
I don't know what the :after element is there for, but you need add the content property inside the rule, otherwise it will not render. You can also use en empty string like content: "".
I have lots of vertical lines that are before <a> links, but I want to hide the third line.
Here is my CSS for my <a> before:
.header-social a:before {
//line style
}
I have tried using nth-child(), but i don't know how to use pseudo elements with nth-child().
.header-social a:before:nth-child(4) {
display:none;
}
Not sure how I could go into any more detail than I already have. Do I need JavaScript?
Do like this:
.header-social a:nth-child(3)::before {
color: red;
}
or using nth-of-type
.header-social a:nth-of-type(3)::before {
color: red;
}
What color will my input be when it is focused AND hovered?
input:hover {
color: red;
}
input:focus {
color: blue;
}
These are presumably in the same stylesheet and they have the same specificity (one pseudo-class and one element), so the only remaining step in the cascade order is order specified. That is to say that if it is hovered and focused, it will be blue.
On Specificity: http://www.w3.org/TR/CSS2/cascade.html#specificity
input:hover {
color: red;
}
input:focus {
color: blue;
}
In the demo, because the input is focused and the CSS has :focus listed last, the input will be blue.
If you reverse those two rule sets, the input will be red, because :hover is last.
Try input:focus:hover
Normaly we just have 3 states, active, hover and focus. What you want wont be possible, but try the code above.
I have button styles that look like this:
.submit-button {
display: block;
color: red;
outline: none;
}
Can I add a :focus state, and then set the outline to whatever the browser default outline is?
.submit-button:focus {
outline: browser-default;
}
I tried outline: inherit; but this had no effect on the page.
You can use the :not() pseudo-class, like this:
.submit-button:not(:focus) {
outline: none;
}
Doing so would prevent the selector to override the defaults on :focus.
The best part, is that the :not() pseudo-class is understandable by all browsers who understand the :focus as well.