if you go here and add "Piept de pui la gratar" to your cart, there will be a popup.
I tried modifying the close button's CSS because I want it fully yellow (including hover and non-hover states), but it just doesn't seem to work.
I've tried setting the color and background-color. The background color seems to work, but I don't want to change it. Setting the color to yellow just doesn't seem to make it. Any help is appreciated.
CSS Code:-
a#thp-close-id {
color:yellow;
background-color: yellow;
}
Also tried:-
.thp-close {
color: yellow;
background-color: yellow;
}
I also tried flagging the color property as !important, but it didn't work.
The reason why it doesn't work, it's because you are trying to apply those styles to the wrong 'element', as the close button uses its pseudo classes, see screen:
So in order to achieve what you need, try writing this css instead:
.thp-close:before,
.thp-close:after {
background-color: #f4c001;
}
Related
I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
I'm trying to style a <select> elements background-color on :hover and at the same time leave the styling of the <option> dropdown untouched. It seems to me that this issue occurs only in Firefox and not in Chrome/Safari.
Chrome select with background color
Firefox select with background color
This would be the code snippet. Please notice that I don't want to have the dropdown to be affected by the background-color in Firefox. Also: Not only the background color changes. Also the borders change. The whole "native" look gets lost as soon as I give the select a background-color.
select {
background-color: red;
}
<select><option>Option</option></select>
Thanks in advance.
Why not to try to set the properties of the options in select too, something like:
select option{
background-color: blue;
}
I think I've found a proper workaround.
We need to apply the hover color to a parent div and use :focus-within.
div:focus-within {
background: red;
}
select {
background: transparent;
border: 0;
}
<div><select><option>Option</option></select></div>
i've got problem. I cant force the code to hover h3and div "underline" at the same time.
Thereis my code: https://jsfiddle.net/nac3570n/
As you can see hover's working but doesnt affect to underline at the same time, unless u'll move cursor on underline
Try changing this:
.underline:hover {
background-color: red;
}
to this:
a:hover .underline {
background-color: red;
}
Basically we move both :hover events to trigger on the same action. In this case, hovering over the parent <a> tag.
https://jsfiddle.net/qmg6wbv5/1/
...fiddle doesn't use your exact styles, but you'll have an easier time using a pseudo element (:after) on the h3, I think. That way it naturally responds to hovering the h3. Hope that gets you on the right track.
This is how my code looks like on CodePen:
I want the background of "Sidenav Left" to be that of "Menu Items", which is represented by class as
.nav-theme {
background-color: #34495E
}
I tried overriding it as
.nav-theme, .md-theme-indigo {
background-color: #34495E
}
but that did not work, what do I need to do?
Be more specific in your CSS selection to override. Since the below selectors are more specific, their priority will be higher than the default background color that was not getting overridden before. In this way you are avoiding the usage of !important
.md-sidenav-left .md-theme-indigo, .md-sidenav-left .nav-theme {
background-color: #34495e;
}
CodePen Demo
You can use the md-colors directive to set it to a color from your color palette. That way it'll change automatically if you pick a different theme.
<md-toolbar md-colors="::{background: '{{theme}}-primary-700'}"
When I mouse over linked images I see hover background color beneath the image. How to avoid this?
Is there any solution that would not involve applying special class to a elements (like a.nobackground:hover)?
CSS:
a:hover, a:focus {
background-color: rgb(240,39,96);
cursor: pointer;
}
HTML:
<img src="with_transparency.png" alt=""/>
edit:
setting img background to none doesn't work
a img {
background: none !important;
}
setting img background to any other color would do the job if there's no non-solid color (or graphic) beneath the image (in this case .png)
a img {
background: #000 !important;
}
Does setting the background color of the images do what you want?
a img {
background: none;
}
Depending on your stylesheets, you might need the !important bang in front of "none" to overwrite other conditions.
Edit: On second thought, you might want to explicitly set a color value instead of simply saying "none."
Another edit: True, if the color or background behind the transparent PNG wasn't a solid color, you'll encounter some issues. One alternative is this:
And the CSS:
.transparent_png {
background-image: url('with_transparency.png');
background-color: transparent;
display: inline-block;
width: ??px;
height: ??px;
}
So here, you're not actually using an image tag, but can overwrite the background-color property that's normally applied on a:hover and a:active. Does this work?
If I understood the question correctly... You will need to either apply a special class to that specific link, or call the link by its location if it´s different from others. For example:
div div div a {}
And as Matt said you might need to use !important because you have a rule that includes all the links in the page. I´d recommend a different class, it´s better from a semantic´s point of view.