<div class="parent">
<div class="child">
</div></div>
In CSS, "child" class has its own bg color, that I can't change. I want to apply "parent" class bg color to container. So, Is there any CSS trick to override "child" bg color by "parent" bg color.
Any help would be much appreciated.
!important will override any inline background color applied, let me know if this works
.parent > .child {
background-color: transparent !important;
}
.parent .child {
background-color: inherit !important; // can also use "transparent"
}
Use !important only if nothing else works.
You could override the CSS using jQuery, although it's inelegant. So, if you have HTML
<div class="parent">
<div class="child">
</div></div>
and CSS:
.parent {
width: 100px;
height: 100px;
background: red;
}
.child {
width: 50px;
height: 50px;
background: blue;
}
this jQuery will find the parent background color and apply it to the child:
$('.child').on('click', function(event) {
var bg = $(this).parent().css("background-color"); // finds background color of parent
$(this).css("background-color", bg); // applies background color to child
});
Here's a jsfiddle: link
Related
if I write this in my css file.
html {
background: black;
}
the black color will cover my whole screen. But at that time, my html Element doesn't have a real height.The height property is 0.
For another HTMLElement like div,which must both has the real height and width properties that make the background-color works.
Why this difference between body, html and div?
I think,
html {
height: 100%;
width: 100%;
background: black;
}
is the only way to make the whole screen background color.
First of all there is no difference between html, body, or div element regarding their presentation.
like html and body, div height and width is not set to anything by default. If you don't set it yourself and if there is no content inside it, you won't be able to see its background color.
example:
.empty{
background-color: black;
}
.size-set{
height: 100px;
width: 100px;
background-color: green;
}
.content-div{
background-color: yellow;
}
<div class="empty"></div>
<div class="size-set"></div>
<div class="content-div">content is here</div>
I hope this will clear some of your doubts.
I want make different background between father elem and child elem.
fiddle : http://jsfiddle.net/cbcL6osm/
I mean, if you see the child div, its background color is red inherited from father div.
That's not I want.
I want make child div to only shows its background image, and do not inherit background color from its father div.
Below is the code of fiddle : http://jsfiddle.net/cbcL6osm/
html :
<div class="father">
test
<div class="child">
test
</div>
</div>
css :
.father {
width: 100px;
height: 100px;
background-color:red;
position:relative;
}
.child {
position:absolute;
top:20px;
left:20px;
width: 60px;
height: 60px;
background:url('https://www.google.co.kr/logos/doodles/2014/leo-tolstoys-186th-birthday-5756677508825088.2-res.png') center;
background-size:30px 30px;
background-repeat:no-repeat;
border:thin solid;
}
The point, actually, is your false premise.
The child div does not inherit the parent's background color
The default background of the div is transparent, that is why the red color is appearing. You would need to replace the background-color of the child div with another one.
MDN background-color docs states:
Initial value: transparent
Inherited: no
I want to create simple hover effect by CCS3 like Default Image is black and white, but when I hover to this image actual colors of this image will be shown.
Please help me
You could use a new property filter but broswer support is not super deep (See http://caniuse.com/css-filters)
JSfiddle Demo
CSS
img {
-webkit-filter:grayscale(100%);
}
img:hover {
-webkit-filter:none;
}
Alternative Method
This requires a wrapping div and a second color background image
JSfiddle
HTML
<div class="wrap">
<img src="http://lorempixel.com/output/abstract-q-g-250-250-8.jpg" alt=""/>
</div>
CSS
.wrap {
display: inline-block;
background-image: url(http://lorempixel.com/output/abstract-q-c-250-250-8.jpg);
}
img {
display: block;
}
.wrap img:hover {
opacity:0;
}
This question already has answers here:
How to apply child:hover but not parent:hover
(6 answers)
Closed 5 years ago.
I looked if this question had already been answered, but couldn't find anything, only questions on the reverse css rule I am looking for.
I have a div that contains one or more child, and I want it to change its background on hover, but not if hovering one of its children; I need the :hover rule to be restricted to pure element, not its offsprings it contains. Being not a parent rule in CSS, and being :hover triggered whenever the mouse passes over the parent AND its children, I find myself out of ideas, and maybe this result is impossible to achieve with only CSS.
However, the question is about CSS, so no JS or JQuery solution is needed (I can provide that by myself)
Code:
HTML
<div class="parent">Text of the parent
<p class="class1">I do not need to trigger parent's background color change!</p>
</div>
CSS
.parent {
background: #ffffff;
}
.parent:hover {
background: #aaaaff;
}
.class1 {
margin: 10px;
}
You can simply achieve this by adding this property to the child class CSS.
pointer-events: none;
This worked for me.
2023+ edit: We now have this functionality in all major browsers using the :has() psuedo-class (perhaps double-check your browser needs). So now you can do this:
.parent:hover:not(:has(*:hover)) {
background: red;
}
<div class="parent">Something to hover of the parent
<p>Child content: hovering me does not trigger the parent's hover!</p>
</div>
Original answer: The ability to stop an element's hover effect when the child is hovered is not currently possible with the CSS selectors that we have, this is as close as we can get without JavaScript - affecting the child on hover in addition to affecting the parent. This will only work if the child is 100% of the width and height of the parent.
Fiddle based on this answer:
<style>
.parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
.parent:hover { background-color: green; }
.child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
.child:hover { background-color: blue; }
.parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
.child:hover ~ .parent-overwrite { display: block; }
</style>
<div class="parent">
<div class="child">Child</div>
<div class="parent-overwrite"></div>
</div>
You should go with JavaScript on this. It's currently not really possible with pure CSS, as Zack Saucier already said.
You cannot do that with pure CSS, but it's easy to achieve with jQuery.
So when you hover over a child, you do not want to amend the parent.
https://jsfiddle.net/8nqfLgsk/2/
$(".list-categories li a").hover( function(){
$(this).toggleClass("active-btn");
});
Basically with this, you're only adding a class to the element which you're hovering over, without amending parent.
I have created a DIV with two DIV's inside it; A DIV with a rollover image and A DIV below it with text and normal rollover behaviors.
They text describes the image and they are both links to the same place so I want them to both rollover together when the mouse is hovering over either one.
Can anyone tell me how I could do that with just CSS?
Much thanks!
You could put the :hover on the outer <div> and then use that to effect the rollovers on the inner <div>s. For example:
<div class="outer">
<div class="inner-img">
</div>
<div class="inner-text">
Where is pancakes house?
</div>
</div>
And some CSS:
.outer {
width: 200px;
border: 1px solid #000;
}
.inner-img {
width: 200px;
height: 100px;
background-image: url(http://placekitten.com/200/100);
}
.inner-text {
width: 200px;
}
.outer:hover .inner-img {
background-image: url(http://placekitten.com/201/100);
}
.outer:hover .inner-text {
background-color: #dfd;
}
And an example: http://jsfiddle.net/ambiguous/3bXhA/