I got two div's and I want to change the color of the first by hovering the second one. I found solutions when the "hovered " come before the objective that its css should be changed, what if the "hovered" come after? What could be done without javascript?
.box, .box-2 {
display: block;
height: 100px;
width: 100px;
margin: 20px;
}
.box {
background-color: red;
}
.box-2 {
background-color: blue;
}
.box-2:hover + .box {
background-color: green;
}
<body>
<div class="wrapper">
<div class="box"></div>
<div class="box-2"></div>
</div>
</body>
A solution is to inverse the order visually and keep the order in the DOM so that you can still use the + selector.
Here is an example with flex:
.wrapper {
display:flex;
flex-direction:column;
}
.box, .box-2 {
display: block;
height: 100px;
width: 100px;
margin: 20px;
}
.box {
background-color: red;
}
.box-2 {
background-color: blue;
order:2; /* this will make box-2 goes after */
}
.box-2:hover + .box {
background-color: green;
}
<body>
<div class="wrapper">
<div class="box-2"></div>
<div class="box"></div>
</div>
</body>
Some related question to get more ideas:
Is there a "previous sibling" CSS selector?
Previous adjacent sibling selector workaround?
While Temani's answer is a great technique, I have an alternative suggestion if you need this to work both ways, using the :not() selector, though it's a tad bit more hit-or-miss because of your margins.
If you check for the hover on the .wrapper element, you can then style your box when it isn't hovered, like so:
.wrapper:hover > .box:not(:hover) {
background-color: green;
}
Related
What I want to do is when a certain div is hovered, it'd affect the properties of another div.
For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.
div {
outline: 1px solid red;
}
#container {
width: 200px;
height: 30px;
}
#cube {
width: 30px;
height: 100%;
background-color: red;
}
#cube:hover {
width: 30px;
height: 100%;
background-color: blue;
}
<div id="container">
<div id="cube">
</div>
</div>
If the cube is directly inside the container:
#container:hover > #cube { background-color: yellow; }
If cube is next to (after containers closing tag) the container:
#container:hover + #cube { background-color: yellow; }
If the cube is somewhere inside the container:
#container:hover #cube { background-color: yellow; }
If the cube is a sibling of the container:
#container:hover ~ #cube { background-color: yellow; }
In this particular example, you can use:
#container:hover #cube {
background-color: yellow;
}
This example only works since cube is a child of container. For more complicated scenarios, you'd need to use different CSS, or use JavaScript.
Using the sibling selector is the general solution for styling other elements when hovering over a given one, but it works only if the other elements follow the given one in the DOM. What can we do when the other elements should actually be before the hovered one? Say we want to implement a signal bar rating widget like the one below:
This can actually be done easily using the CSS flexbox model, by setting flex-direction to reverse, so that the elements are displayed in the opposite order from the one they're in the DOM. The screenshot above is from such a widget, implemented with pure CSS.
Flexbox is very well supported by 95% of modern browsers.
.rating {
display: flex;
flex-direction: row-reverse;
width: 9rem;
}
.rating div {
flex: 1;
align-self: flex-end;
background-color: black;
border: 0.1rem solid white;
}
.rating div:hover {
background-color: lightblue;
}
.rating div[data-rating="1"] {
height: 5rem;
}
.rating div[data-rating="2"] {
height: 4rem;
}
.rating div[data-rating="3"] {
height: 3rem;
}
.rating div[data-rating="4"] {
height: 2rem;
}
.rating div[data-rating="5"] {
height: 1rem;
}
.rating div:hover ~ div {
background-color: lightblue;
}
<div class="rating">
<div data-rating="1"></div>
<div data-rating="2"></div>
<div data-rating="3"></div>
<div data-rating="4"></div>
<div data-rating="5"></div>
</div>
Only this worked for me:
#container:hover .cube { background-color: yellow; }
Where .cube is CssClass somewhere inside of the #container.
Tested in Firefox, Chrome and Edge.
Here is another idea that allow you to affect other elements without considering any specific selector and by only using the :hover state of the main element.
For this, I will rely on the use of custom properties (CSS variables). As we can read in the specification:
Custom properties are ordinary properties, so they can be declared on
any element, are resolved with the normal inheritance and cascade
rules ...
The idea is to define custom properties within the main element and use them to style child elements and since these properties are inherited we simply need to change them within the main element on hover.
Here is an example:
#container {
width: 200px;
height: 30px;
border: 1px solid var(--c);
--c:red;
}
#container:hover {
--c:blue;
}
#container > div {
width: 30px;
height: 100%;
background-color: var(--c);
}
<div id="container">
<div>
</div>
</div>
Why this can be better than using specific selector combined with hover?
I can provide at least 2 reasons that make this method a good one to consider:
If we have many nested elements that share the same styles, this will avoid us complex selector to target all of them on hover. Using Custom properties, we simply change the value when hovering on the parent element.
A custom property can be used to replace a value of any property and also a partial value of it. For example we can define a custom property for a color and we use it within a border, linear-gradient, background-color, box-shadow etc. This will avoid us reseting all these properties on hover.
Here is a more complex example:
.container {
--c:red;
width:400px;
display:flex;
border:1px solid var(--c);
justify-content:space-between;
padding:5px;
background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
width:30%;
background:var(--c);
box-shadow:0px 0px 5px var(--c);
position:relative;
}
.box:before {
content:"A";
display:block;
width:15px;
margin:0 auto;
height:100%;
color:var(--c);
background:#fff;
}
/*Hover*/
.container:hover {
--c:blue;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
As we can see above, we only need one CSS declaration in order to change many properties of different elements.
Big thanks to Mike and Robertc for their helpful posts!
If you have two elements in your HTML and you want to :hover over one and target a style change in the other the two elements must be directly related--parents, children or siblings. This means that the two elements either must be one inside the other or must both be contained within the same larger element.
I wanted to display definitions in a box on the right side of the browser as my users read through my site and :hover over highlighted terms; therefore, I did not want the 'definition' element to be displayed inside the 'text' element.
I almost gave up and just added javascript to my page, but this is the future dang it! We should not have to put up with back sass from CSS and HTML telling us where we have to place our elements to achieve the effects we want! In the end we compromised.
While the actual HTML elements in the file must be either nested or contained in a single element to be valid :hover targets to each other, the css position attribute can be used to display any element where ever you want. I used position:fixed to place the target of my :hover action where I wanted it on the user's screen regardless to its location in the HTML document.
The html:
<div id="explainBox" class="explainBox"> /*Common parent*/
<a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light /*highlighted term in text*/
</a> is as ubiquitous as it is mysterious. /*plain text*/
<div id="definitions"> /*Container for :hover-displayed definitions*/
<p class="def" id="light"> /*example definition entry*/ Light:
<br/>Short Answer: The type of energy you see
</p>
</div>
</div>
The css:
/*read: "when user hovers over #light somewhere inside #explainBox
set display to inline-block for #light directly inside of #definitions.*/
#explainBox #light:hover~#definitions>#light {
display: inline-block;
}
.def {
display: none;
}
#definitions {
background-color: black;
position: fixed;
/*position attribute*/
top: 5em;
/*position attribute*/
right: 2em;
/*position attribute*/
width: 20em;
height: 30em;
border: 1px solid orange;
border-radius: 12px;
padding: 10px;
}
In this example the target of a :hover command from an element within #explainBox must either be #explainBox or also within #explainBox. The position attributes assigned to #definitions force it to appear in the desired location (outside #explainBox) even though it is technically located in an unwanted position within the HTML document.
I understand it is considered bad form to use the same #id for more than one HTML element; however, in this case the instances of #light can be described independently due to their respective positions in uniquely #id'd elements. Is there any reason not to repeat the id #light in this case?
WARNING: If you are able to use CSS: Use CSS without Javascript!
If you want to select an element with an unknown / or not reachable position you could use JavaScript.
const cube = document.getElementById('cube')
const container = document.getElementById('container')
cube.addEventListener('mouseover', () => container.style.backgroundColor = "blue")
cube.addEventListener('mouseleave', () => container.style.backgroundColor = "white")
div {
outline: 1px solid red;
width: 200px;
height: 30px;
}
#cube {
background-color: red;
}
<main>
<div id="container">
</div>
</main>
<div id="cube">
</div>
In addition to the common selectors already provided in the other answers, you can now rely on :has() in the situations where we don't have a parent/child or sibling relation.
Here is an example:
.box {
width: 200px;
aspect-ratio: 1;
display: inline-block;
border: 1px solid red;
}
.box > div {
margin: 5px;
height: 100%;
border: 2px solid green;
cursor: pointer;
}
/* when div1 is hovered make div2 blue */
body:has(#div1:hover) #div2 {
background: blue;
}
/* when div2 is hovered make div1 purple */
body:has(#div2:hover) #div1 {
background: purple;
}
<div class="box">
<div id="div1">
</div>
</div>
<div class="box">
<div id="div2">
</div>
</div>
As you can see, we can affect div1 by hovering div2 and vice versa.
#imageDiv:hover #detailDiv
{
z-index: -999 !important;
}
here
#imageDiv is first div that to be hover and
#detailDiv is second div on that css will apply on hover
so if i hover on first div then zindex will assign to second div
Works for me
This question already has answers here:
Nesting CSS classes
(8 answers)
Closed 1 year ago.
I want to do something like
CSS:
.parent {
height: 100px;
width: 100px;
background-color: black;
.child {
height: 50px;
width: 50px;
background-color: red;
}
}
HTML:
<div class="parent">
<div class="child">
</div>
</div>
But this doesn't work. I will have to do this:
.parent {
height: 100px;
width: 100px;
background-color: black;
}
.parent .child {
height: 50px;
width: 50px;
background-color: red;
}
I will have to type the parent name again and again if there are many children elements inside parent. Is there any short way to do it?
What you're trying to do with css (nesting related styles) requires a pre-processor. I would recommend reading about Sass.
If you're trying to be really specific, and apply these properties only to elements inside .parent that have the .child class, you need to have the parent selector before the actual selector. ( .parent .child { })
If you want to apply it to all elements that have a class .child you could just directly apply the style, without specifying a parent selector.
.child {
height: 50px;
width: 50px;
background-color: red;
}
.parent {
height: 100px;
width: 100px;
background-color: black;
}
<div class="parent">
<div class="child">
</div>
</div>
Using SCSS, you can have the multi level nesting.
On top of that feature, there are other beautiful features that's being provided by SCSS-lang. Check out the official site
I'm trying to use the :not selector to get rid of margins from an element that isn't followed by a certain element (.red).
HTML
<section class="image"></section>
<div class="red"></div>
<section class="image"></section>
<section class="image"></section>
<section class="image"></section>
CSS
.image {
background: green;
height: 100px;
width: 100px;
margin-bottom: 30px;
}
.image + div:not(.red) {
margin-bottom: 0;
}
For some reason though, the bottom margins aren't being removed. I've setup a CodePen of it in action over here.
Any help is appreciated. Thanks in advance!
Try using the sibling selector. Here is a JSFiddle
CSS:
div.red ~ .image {
margin-bottom: 0;
}
This will target any .image that is preceded by a div.red. However, a .image that is before a div.red will not be selected.
.image {
background: green;
height: 100px;
width: 100px;
margin-bottom: 30px;
}
.red .image { //this will select the section which are children of red class and have image class
margin-bottom: 0;
}
So in FireFox / IE for some reason, my hover keeps blinking, I'm not quite sure why. Is it just better to do my hovers in javascript or is there an easier fix in CSS? Here's a JSFiddle to show what i mean - http://jsfiddle.net/eRBCa/
HTML
<div>
<div id="div1"></div>
<div id="div2">Test Div</div>
</div>
CSS
#div1{
width: 300px;
height: 275px;
background-color: yellow;
}
#div1:hover + #div2{
display: block;
}
#div2{
background-color: grey;
width: 300px;
height: 275px;
margin-top: -275px;
opacity: .9;
display: none;
}
It seems (without getting in to much technical details), that the :hover selector works differently in Chrome than in Firefox or IE. Namely, when #div2 gets visible, it becomes the "hovered" element and #div1 loses the 'hover' "attribute" (in FF or IE). That's what causes the flickering.
You could fix that by changing your CSS like this:
#div1:hover + #div2,
#div2:hover {
display: block;
}
See, also, this short demo.
The jitter effect is created because once you display the overlay, your mouse is now hovering the overlay instead of the original (#div1). You can fix this by looking at whether the parent element is hovered instead.
/* instead of #div1:hover + #div2, where .container is a class on the parent */
.container:hover #div2 {
display: block;
}
http://jsfiddle.net/eRBCa/1/
You can do something like this:
http://jsfiddle.net/eRBCa/4/
HTML
<div>
<div id="div1">
<div class="content">
content here
</div>
</div>
</div>
CSS
#div1{
width: 300px;
height: 275px;
background-color: yellow;
position:relative;
}
#div1:hover{ background-color:red; }
#div1:hover .content {display:block; }
.content {display:none; position:absolute; top:0; left:0}
You should call action earlier in html.
Once you hover div1, div2 comes on top, so you hover div2 and they are adjacent.
http://jsfiddle.net/GPCh3/
<div id="call">
<div id="div1"></div>
<div id="div2">Test Div</div>
</div>
#div1{
width: 300px;
height: 275px;
background-color: yellow;
}
#call:hover #div2{
display: block;
}
#div2{
background-color: grey;
width: 300px;
height: 275px;
margin-top: -275px;
opacity: .9;
display: none;
}
What I want to do is when a certain div is hovered, it'd affect the properties of another div.
For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.
div {
outline: 1px solid red;
}
#container {
width: 200px;
height: 30px;
}
#cube {
width: 30px;
height: 100%;
background-color: red;
}
#cube:hover {
width: 30px;
height: 100%;
background-color: blue;
}
<div id="container">
<div id="cube">
</div>
</div>
If the cube is directly inside the container:
#container:hover > #cube { background-color: yellow; }
If cube is next to (after containers closing tag) the container:
#container:hover + #cube { background-color: yellow; }
If the cube is somewhere inside the container:
#container:hover #cube { background-color: yellow; }
If the cube is a sibling of the container:
#container:hover ~ #cube { background-color: yellow; }
In this particular example, you can use:
#container:hover #cube {
background-color: yellow;
}
This example only works since cube is a child of container. For more complicated scenarios, you'd need to use different CSS, or use JavaScript.
Using the sibling selector is the general solution for styling other elements when hovering over a given one, but it works only if the other elements follow the given one in the DOM. What can we do when the other elements should actually be before the hovered one? Say we want to implement a signal bar rating widget like the one below:
This can actually be done easily using the CSS flexbox model, by setting flex-direction to reverse, so that the elements are displayed in the opposite order from the one they're in the DOM. The screenshot above is from such a widget, implemented with pure CSS.
Flexbox is very well supported by 95% of modern browsers.
.rating {
display: flex;
flex-direction: row-reverse;
width: 9rem;
}
.rating div {
flex: 1;
align-self: flex-end;
background-color: black;
border: 0.1rem solid white;
}
.rating div:hover {
background-color: lightblue;
}
.rating div[data-rating="1"] {
height: 5rem;
}
.rating div[data-rating="2"] {
height: 4rem;
}
.rating div[data-rating="3"] {
height: 3rem;
}
.rating div[data-rating="4"] {
height: 2rem;
}
.rating div[data-rating="5"] {
height: 1rem;
}
.rating div:hover ~ div {
background-color: lightblue;
}
<div class="rating">
<div data-rating="1"></div>
<div data-rating="2"></div>
<div data-rating="3"></div>
<div data-rating="4"></div>
<div data-rating="5"></div>
</div>
Only this worked for me:
#container:hover .cube { background-color: yellow; }
Where .cube is CssClass somewhere inside of the #container.
Tested in Firefox, Chrome and Edge.
Here is another idea that allow you to affect other elements without considering any specific selector and by only using the :hover state of the main element.
For this, I will rely on the use of custom properties (CSS variables). As we can read in the specification:
Custom properties are ordinary properties, so they can be declared on
any element, are resolved with the normal inheritance and cascade
rules ...
The idea is to define custom properties within the main element and use them to style child elements and since these properties are inherited we simply need to change them within the main element on hover.
Here is an example:
#container {
width: 200px;
height: 30px;
border: 1px solid var(--c);
--c:red;
}
#container:hover {
--c:blue;
}
#container > div {
width: 30px;
height: 100%;
background-color: var(--c);
}
<div id="container">
<div>
</div>
</div>
Why this can be better than using specific selector combined with hover?
I can provide at least 2 reasons that make this method a good one to consider:
If we have many nested elements that share the same styles, this will avoid us complex selector to target all of them on hover. Using Custom properties, we simply change the value when hovering on the parent element.
A custom property can be used to replace a value of any property and also a partial value of it. For example we can define a custom property for a color and we use it within a border, linear-gradient, background-color, box-shadow etc. This will avoid us reseting all these properties on hover.
Here is a more complex example:
.container {
--c:red;
width:400px;
display:flex;
border:1px solid var(--c);
justify-content:space-between;
padding:5px;
background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
width:30%;
background:var(--c);
box-shadow:0px 0px 5px var(--c);
position:relative;
}
.box:before {
content:"A";
display:block;
width:15px;
margin:0 auto;
height:100%;
color:var(--c);
background:#fff;
}
/*Hover*/
.container:hover {
--c:blue;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
As we can see above, we only need one CSS declaration in order to change many properties of different elements.
Big thanks to Mike and Robertc for their helpful posts!
If you have two elements in your HTML and you want to :hover over one and target a style change in the other the two elements must be directly related--parents, children or siblings. This means that the two elements either must be one inside the other or must both be contained within the same larger element.
I wanted to display definitions in a box on the right side of the browser as my users read through my site and :hover over highlighted terms; therefore, I did not want the 'definition' element to be displayed inside the 'text' element.
I almost gave up and just added javascript to my page, but this is the future dang it! We should not have to put up with back sass from CSS and HTML telling us where we have to place our elements to achieve the effects we want! In the end we compromised.
While the actual HTML elements in the file must be either nested or contained in a single element to be valid :hover targets to each other, the css position attribute can be used to display any element where ever you want. I used position:fixed to place the target of my :hover action where I wanted it on the user's screen regardless to its location in the HTML document.
The html:
<div id="explainBox" class="explainBox"> /*Common parent*/
<a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light /*highlighted term in text*/
</a> is as ubiquitous as it is mysterious. /*plain text*/
<div id="definitions"> /*Container for :hover-displayed definitions*/
<p class="def" id="light"> /*example definition entry*/ Light:
<br/>Short Answer: The type of energy you see
</p>
</div>
</div>
The css:
/*read: "when user hovers over #light somewhere inside #explainBox
set display to inline-block for #light directly inside of #definitions.*/
#explainBox #light:hover~#definitions>#light {
display: inline-block;
}
.def {
display: none;
}
#definitions {
background-color: black;
position: fixed;
/*position attribute*/
top: 5em;
/*position attribute*/
right: 2em;
/*position attribute*/
width: 20em;
height: 30em;
border: 1px solid orange;
border-radius: 12px;
padding: 10px;
}
In this example the target of a :hover command from an element within #explainBox must either be #explainBox or also within #explainBox. The position attributes assigned to #definitions force it to appear in the desired location (outside #explainBox) even though it is technically located in an unwanted position within the HTML document.
I understand it is considered bad form to use the same #id for more than one HTML element; however, in this case the instances of #light can be described independently due to their respective positions in uniquely #id'd elements. Is there any reason not to repeat the id #light in this case?
WARNING: If you are able to use CSS: Use CSS without Javascript!
If you want to select an element with an unknown / or not reachable position you could use JavaScript.
const cube = document.getElementById('cube')
const container = document.getElementById('container')
cube.addEventListener('mouseover', () => container.style.backgroundColor = "blue")
cube.addEventListener('mouseleave', () => container.style.backgroundColor = "white")
div {
outline: 1px solid red;
width: 200px;
height: 30px;
}
#cube {
background-color: red;
}
<main>
<div id="container">
</div>
</main>
<div id="cube">
</div>
In addition to the common selectors already provided in the other answers, you can now rely on :has() in the situations where we don't have a parent/child or sibling relation.
Here is an example:
.box {
width: 200px;
aspect-ratio: 1;
display: inline-block;
border: 1px solid red;
}
.box > div {
margin: 5px;
height: 100%;
border: 2px solid green;
cursor: pointer;
}
/* when div1 is hovered make div2 blue */
body:has(#div1:hover) #div2 {
background: blue;
}
/* when div2 is hovered make div1 purple */
body:has(#div2:hover) #div1 {
background: purple;
}
<div class="box">
<div id="div1">
</div>
</div>
<div class="box">
<div id="div2">
</div>
</div>
As you can see, we can affect div1 by hovering div2 and vice versa.
#imageDiv:hover #detailDiv
{
z-index: -999 !important;
}
here
#imageDiv is first div that to be hover and
#detailDiv is second div on that css will apply on hover
so if i hover on first div then zindex will assign to second div
Works for me