I'd need to recreate the following effect: hovering onto .card container, should trigger :hover also on .btn inside it.
Please, consider this example code: https://codepen.io/ldetomi/pen/ZEoNprQ
Ok, could be possible to use JS and trigger an 'hover' css class onto inner .btn, but this will force me to duplicate code for hover state of .btn, for :hover pseudo-state and .hover class. Or, in another way, I'd need to duplicate state of hover buttons, in case that is child of a DIV that has an 'hover' state.
Due to the thing that i have a complex style for hover state of buttons, I'd like to be able to trigger the same hover effect on it, also if hover is made onto father DIV in a smart way.
If, possible, I'd like to avoid something like this:
.btn {
&:hover {
background: red;
}
}
.card {
&:hover {
.btn {
background: red;
}
}
}
You can just add the below rule.
.card:hover > .btn {
background: red;
}
Edit :
You can club both hover rules together to prevent code duplication
.card:hover > .btn, .btn:hover
{
background:red;
}
Related
My site is test06.menchasha.ru. I am trying to apply a hover effect. A div in the right should appear when the link, 'Promotional Activities' is hovered.
Example
I used the following code:
.child1 {
display: none;
}
a .title1:hover + .child1 {
display: inline-block;
}
But the hover effect is not working. What should I correct?
Thank you in advance!
I've checked the code in your link - you simply can't achieve the effect you need with your structure and only with CSS.
Here is your code:
a .title1:hover + .child1 {
display: inline-block;
}
If you want it to work the way you need your a element must have 2 children: .title1 and .child1, also .child1 must be direct sibling of .title1 cause + selector helps you to access only the nearest sibling of the element. But in your structure all the .child elements are not siblings of .title elements, they are in another div block. So just use JS to make them visible on hover.
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 always wonder why this wouldn't work as it would make so much sense.
CSS:
#button1:hover {
background: green;
#button2 {
background: red;
}
}
HTML
<button id="button1"></button>
<button id="button2"></button>
If I hover over Button1, Button2's background should also change.
Is there a workaround to this other than the use of Javascript?
You can use the adjacent selector,
#button1:hover {
Background: green;
}
#button1:hover + #button2 {
Background: red;
}
Have a look at all the css selectors: http://css-tricks.com/almanac/
Oh by the way it's only possible to apply css on hover to elements after the hovered element. Parent elements and elements before the hovered element cannot be styled with css on hover. It's a limitation of css.
This can be done but CSS lacks the ability to provide powerful conditional statements. However if you look into SASS CSS LESS it is starting to happen.
My website here I'm creating for a friend is giving me issues with the input[type="button"]. I only a specific style to be applied to the button in the sidebar ONLY. However no matter what I do it effects all buttons.
#sidebar.widget-wrap input[type="button"], input[type="submit"] {
clear: both;
display: block;
margin-top: 2em;
width: 100%;
}
How do I make it only effect the go button in the sidebar?
You must duplicate #sidebar.widget-wrap:
#sidebar.widget-wrap input[type="button"],
#sidebar.widget-wrap input[type="submit"] {
}
Otherwise your selector would result in every input[type="button"] that is inside #sidebar.widget-wrap and every input[type="submit"].
The comma has no special meaning, it only combines two (or more) selectors. The result will always be the same if you use two separate selectors instead of the combined one:
div a, div span { color: yellow }
/* is the same as */
div a { color: yellow }
div span { color: yellow }
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.