I'm trying to apply a hover effect to all button tags that have the class dialog-btn. I've tried .dialog-btn:hover{background-color:gold} but that doesn't work. I've also tried other suggestions to similar questions but still no luck. Can someone please clarify how I can do this?
Neither of the two examples below works.
button.dialog-btn:hover {
background-color: gold;
}
<div class="dialog-btns">
<button class="dialog-btn" id="yes">Ref Match</button>
<button class="dialog-btn" id="about">About</button>
</div>
.dialog-btn:hover {
background-color: gold;
}
<div class="dialog-btns">
<button class="dialog-btn" id="yes">Ref Match</button>
<button class="dialog-btn" id="about">About</button>
</div>
EDIT 2:
#yes{
background-color:green;
}
#about{
background-color:purple;
}
The code above appears to overwrite the .dialog-btn:hover code above. Why is that?
Reading your comments, i guess you want to have gold color on all of your buttons if you hover over parrent element.
If it is the case, you can do that
.dialog-btns:hover .dialog-btn{
background-color: gold;
}
Related
I want to use content variable with in-line styles in react, but I dont know how to do this ?
CSS3
.right::after, button::after {
content: var(--content);
display: block;
position: absolute;
white-space: nowrap;
padding: 40px 40px;
pointer-events:none;
}
React Component
return (
<Button
{...configButton}
style={{'--content': "Login" }}
>
<div class="left"></div>
Login
<div class="right"></div>
{children}
</Button>
);
Ok the solution to this problem is quite simple, It made me think for a while.
The css variable that you provided works indeed.
But when it comes to the content of a psudo element then you should provide the value with a pair of quotes and it will work fine.
<Button
{...configButton}
style={{'--content': "'Login'" }}
>
change the "Login" into "'Login'" and this should work fine.
thank you.
It should work.
Are you passing style to the actual rendered element in Button component?
Is the CSS aplied?
div:after {
content: var(--test-var);
}
<div style="--test-var: 'Test'"></div>
index.html:
<div>
<span>
<button disabled>
Button 1
</button>
<button>
Button 2
</button>
</span>
</div>
index.less:
:not(&[disabled]) button {
background-color: red;
}
This gives the below output. Both buttons are colored red but I am trying to target only button that is not disabled.
Is there a way to do this? I am specifically looking to target buttons that are not disabled.
Here is the jsfiddle : https://jsfiddle.net/6gqb19e3/36/
I am new to LESS and my syntax was wrong. After bit of trial and error, I came up with this:
button {
background-color: grey;
&:not([disabled]) {
background-color: green;
}
}
and it gives this output:
Here is the jsfiddle with: https://jsfiddle.net/6gqb19e3/81/
I want to change the styles of the today-date cell when the datepicker is opened and focused for the first time.
Right now, when I open the datepicker, the today-date cell has the following style:
As you can see, the 14th day cell has the default material background color applied.
I want to change this specific property. However, when I try to inspect this element, the class is not found since the datepicker focus is lost (the background-color disappears, leaving only the border on the cell).
I have tried playing around with .mat-calendar-body-today:focus or .mat-calendar-body-hover but neither of them seem to access the today-date when it is initially focused.
Thanks in advance.
Following up from alin's answer, the table cell class .mat-calendar-body-active grabbed my attention.
Indeed, this is the class that should be used in combination with .mat-calendar-body-today, as opposed to .mat-calendar-body-selected.
I managed to access the today-date cell when datepicker is first focused like so:
/* SCCS alternative */
.mat-calendar-body-active {
.mat-calendar-body-today {
color: red;
background-color: blue;
}
}
/* CSS alternative */
.mat-calendar-body-active > .mat-calendar-body-today {
color: red;
background-color: blue;
}
it works for me
.mat-calendar-body-cell:not(.mat-calendar-body-disabled) {
&.mat-calendar-body-active {
&:focus {
.mat-calendar-body-cell-content:not(.mat-calendar-body-selected).mat-focus-indicator.mat-calendar-body-today {
background-color: rgba(0,0,0,.04);
}
}
}
}
Maybe this can help you
<td role="gridcell" class="mat-calendar-body-cell mat-calendar-body-active ng-star-inserted" tabindex="0" data-mat-row="2" data-mat-col="5" aria-label="January 14, 2022" aria-selected="true" aria-current="date" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;">
<div class="mat-calendar-body-cell-content mat-focus-indicator mat-calendar-body-selected mat-calendar-body-today"> 14 </div>
<div aria-hidden="true" class="mat-calendar-body-cell-preview"></div>
</td>
and this is the class that you want to update
.mat-calendar-body-selected {
background-color: red;
}
So you might combine this .mat-calendar-body-selected with .mat-calendar-body-today
Let's say I have links looking like buttons all over my app. They are orange, unless they are "disabled" (having no href):
a.button {
background-color: orange;
}
a.button:not([href]) {
background-color: grey;
}
Now, I'm not sure how to allow certain buttons look different in their context, but keep the disabled ones as they were. Let's say I need the "buttons" inside my <footer> to be green, or - as usual - grey if disabled:
footer a.button {
background-color: green;
}
The problem is that this rule has higher priority, as it's more specific. How can I allow disabled buttons in the footer to still be grey without repeating my code? I know I can use !important, but please assume that my real-life example is more complex and I want to avoid using it.
Use CSS variables. You define the default value and you simply set the variable to define a new one.
a.button {
background-color: var(--main, orange);
}
a.button:not([href]) {
background-color: var(--disable, grey);
}
footer#foo a.button { /*I am adding an ID to make it really more specific*/
--main: green;
}
<a class="button">a link</a>
a link
<footer id="foo">
<a class="button">a link</a>
a link
</footer>
Check out http://qnimate.com/dive-into-css-specificity/ to see a full list of CSS specificity.
Assuming you have more than one a.button in your footer, we'll skip using a plain id selector. You could pair an id and attribute selector, using the title attribute to identify all disabled "buttons":
index.html
<a class="button">a link</a>
a link
<footer id="foo">
<a class="button" title="disabled">a link</a>
a link
</footer>
and styles.css
#foo a[title="disabled"] {
color: green;
}
I'm using a <span class="image"> with a background:
.image {
background-image: url("image.jpg")
}
How can I also add a hint on this image when people put the mouse over it?
Is there a CSS way to achieve this?
Use the HTML title attribute:
<span class="image" title="This is a hint.">
You can do something with :after content:
.image:hover:after {
content:"This is a hint";
}
Demo: http://jsfiddle.net/fXuSB/
However, this content is probably better off in the HTML (and your image actually might be as well). You can use the title attribute for a simple default tooltip, or perhaps something like this:
<span class="image">
<span class="hint">This is a hint</span>
</span>
.image .hint {
display:none;
}
.image:hover .hint {
display:block;
}
Demo: http://jsfiddle.net/fXuSB/1/