I have a <div> that contains a <button>. Each have their own classes. In the styles for each of those classes I specify the background-color property. For some reason the child button over-rides the parent property.
.tab {
background-color: red;
}
.tab,
button.active {
background-color: blue;
}
<div class="tab">
<button>My Button</button>
<button class="active">button 2</button>
</div>
Here is a JS Fiddle showing it:
https://jsfiddle.net/jp3kbfwn/
Remove the comma after .tab:
.tab button.active {
background-color: blue;
}
With the comma, it is saying to set the background color to blue for both the .tab class and button.active.
The .tab element is getting the blue background because you're using a comma between .tab and button.active when defining their styles.
The comma in this context means apply to both of these elements.
This is because you're listing your css elements rather than using selectors. Heres what the css should look like.
<style>
.tab {
background-color: red;
}
.tab > button.active {
background-color: blue;
}
</style>
Note how i've added in the > selector
Related
i have an inline blocked div inside anchor
HTML:
<ul>
<li>
<a href="">simple
<div class='bar'>
</div>
</a>
</li>
</ul>
CSS:
.bar {
width: 25px;
height: 25px;
background-color: red;
display: inline-block;
}
.bar:hover {
background-color: blue;
}
I need to get hover effect on div while i hover the anchor, not only div.
Also, my case is a little bit more complicated, so i cant use something like
a:hover .bar {
background-color: blue;
}
Here is jsfiddle with code http://jsfiddle.net/zeL102wr/2/
Check this http://jsfiddle.net/zeL102wr/4/
Add a class to your <a> tag and use :hover on that
Example
HTML
<a class="hoveranchor" href="">simple
<div class='bar'>
</div>
</a>
CSS
.hoveranchor:hover > .bar {
background-color: blue;
}
This would apply the style to all elements with class="bar" which are direct descendent of elements with class="hoveranchor"
looks like it can't be done in some universal way. only by something like wrapping li to some class and using css
.baz a:hover .foo .hover {
opacity: 1;
}
.baz a:hover .foo .main {
opacity: 0;
}
Updated the fiddle http://jsfiddle.net/zeL102wr/17/
Since i use LESS, i made a function
.enable-foo-hover() {
&:hover {
.foo {
.main {
opacity: 0;
}
.hover {
opacity: 1;
}
}
}
}
and use it for the element from which i need to hover my construction. Thanks for your answers
Updated Css
ul li a:hover ,.bar:hover {
background-color: blue;
}
Demo
If you are fine with using jquery the following will work for you 'advanced' list items...
JQUERY
$(document).ready(function () {
$('.hoveranchor').mouseover(function (e) {
console.log($(this).children('.main'));
$(this).find('.main').addClass('hover');
$(this).find('.main').removeClass('main');
});
$('.hoveranchor').mouseout(function (e) {
console.log($(this).children('.main'));
$(this).find('.hover').addClass('main');
$(this).find('.hover').removeClass('hover');
});
});
Additionally you will need to:
add class='hoveranchor' to your anchor tags
Remove
Remove css for :hover
Change opacity of .hover to 1
Check it in action here: http://jsfiddle.net/zeL102wr/5/
I have three divs when hovered changes the text right below them (This is Text A, This is Text B, This is Text C). The default active text is Text B.
I want to the color of div.b to change when I hover over div.c
I have this working for the hover over div.a:hover
Fiddle
HTML
<div class="onHoverText">
<div class="a">Text A</div>
<div class="b">Text B</div>
<div class="c">Text C</div>
<div class="outputBox">
<span>This is Text B</span></div>
</div>
CSS
.onHoverText {
cursor: pointer;
}
.a, .b, .c {
display: inline-block;
margin-right: 3%;
font-size: 15px;
}
.b {
color: #FF0004;
border-right: thin dashed #3A3A3A;
border-left: thin dashed #3A3A3A;
padding: 0 2%;
}
.a:hover, .c:hover {
color: #FF0004;
}
.outputBox {
font-size: 36px;
}
div.a:hover ~ div.outputBox span, div.c:hover ~ div.outputBox span {
display: none;
}
div.a:hover ~ div.outputBox:after {
content:' This is Text A';
}
div.c:hover ~ div.outputBox:after {
content:' This is Text C';
}
div.a:hover ~ div.b:not(.active), div.c:hover ~ div.b:not(.active) {
color: #000;
}
I think the reason this isn't working is because the adjacent selector in CSS will only target elements after the target element:
The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn't need immediately succeed the first element, but can appear anywhere after it.
Source CSS Tricks
Here I am doing little trick to get closer to your requirement. I have added the following two new styles. Check the fiddle.
.onHoverText:hover .b{color:#000;}
.b:hover{color:#FF0004 !important}
DEMO
There is no previous sibling selector in CSS.
You should use javascript as a workaround if you do not have the choice (here with jQuery) :
$('.a, .c').hover(function(){
$('.b').toggleClass('disabled');
});
With a simple css class :
.b.disabled {
color: #000;
}
jsFiddle Demo
I have the following CSS classes:
button.current {
background-color: #000;
}
button:hover {
background: #0007d5;
}
How can I make it so the background color does not change for the second button? In other
words I want the current and the hover to one work if there's not an additional class of
"inactive" on the button.
<button class="current">Show the current background</button>
<button class="current inactive">Show the current background</button>
You can use the :not() pseudo-class:
button.current:not(.inactive) {
background-color: #000;
}
button:hover:not(.inactive) {
background: #0007d5;
}
jsFiddle Demo
I've got a css buttons style and some predefined colour styles. I use colour classes to colour things the same colour and a button style to make the buttons round.
How do I add a hover style to my buttons to change the colour to a lighter shade? I thought it would be as simple as .class class2:hover {etc} but it doesn't work for some reason.
Here's a fiddle I prepared to demonstrate:
http://jsfiddle.net/7n4Wy/
HTML
<p class="red button">Test</p>
<p class="blue button">Test</p>
<p class="red"> Not a button </p>
CSS
.red {
background: red;
}
.blue {
background: blue;
}
.button {
border-radius: 6px;
}
.button:hover .red:hover {
background: pink;
}
What you have is trying to match .red:hover that is inside .button:hover, which implies a nested element in your markup.
Since you're selecting the same element, you need to combine both classes with a single :hover:
.red.button:hover {
background: pink;
}
Updated fiddle
You can apply a CSS-rule to multiple selectors (classes like «.button», or states like «:hover») by separating them with a comma.
therefore just add a comma:
.button:hover, .red:hover {
background: pink;
}
Use following code JSFIDDLE
.button.red:hover {
background: pink;
}
To apply multiple classes, don't add a space (just use another period):
CSS
p.button {
border-radius: 6px;
}
p.red {
background: 6px;
}
p.button.red:hover {
background: pink;
}
HTML
<p class="button red">Hover Here</p>
The space is used to denote a child element. i.e. p.button red:hover would affect all elements with class red on hover that are wholly contained in parent paragraphs with class button.
I have a question and I am not sure if it is possible, but I thought I would try asking.
Say I had three div's:
<div id="parent_div">
<div id="child_div_1">Blue</div>
<div id="child_div_2">Red</div>
</div>
If all text inside parent_div is set to black, how would I make the child_div_1 and child_div_2 change font-color to blue and red respectively, when the parent div is hovered over?
Sorry if this is a bit confusing, but is there a way to do this preferably with CSS only?
#parent_div:hover #child_div_1 {
color: blue;
}
#parent_div:hover #child_div_2 {
color: red;
}
Just target the relevant child elements based upon the :hover state of the parent:
/* defaults */
#parent_div div {
color: #000; /* or whatever... */
}
/* hover rules */
#parent_div:hover #child_div_1 {
color: blue;
}
#parent_div:hover #child_div_2 {
color: red;
}
JS Fiddle demo.
Use the :hover pseudo-class on the parent element:
#parent_div { color: black; }
#parent_div:hover #child_div_1 { color: blue; }
#parent_div:hover #child_div_2 { color: red; }
Demo: http://jsfiddle.net/Guffa/M3WsW/