Please tell me why when you hover over the third div, the size of the second div does not change, as when you hover over the first div.
#block {
width: 50%;
white-space: nowrap;
}
.div {
display: inline-block;
text-align: center;
}
div:nth-child(1) {
width: 10%;
background: red;
}
div:nth-child(2) {
width: 80%;
background: blue;
}
div:nth-child(3) {
width: 10%;
background: green;
}
div:nth-child(1):hover {
width: 80%;
}
div:nth-child(1):hover + div:nth-child(2) {
width: 10%;
}
div:nth-child(3):hover {
width: 80%;
}
div:nth-child(3):hover + div:nth-child(2) {
width: 10%;
}
<div id="block">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</div>
Quoting from Mozilla Developers Website For More info Check the link at the bottom
The adjacent sibling combinator (+) separates two selectors and
matches the second element only if it immediately follows the first
element, and both are children of the same parent element.
This means it will try to find a sibling of the same parent that is after the current selecting element not the sibling before the current One.
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
Related
I already have a css hover where when hovering over someones name, a card to the side appears with more information about that user.
Is it possible to have another hover on top of the first hover? So another card appears with even more information.
Name (hover on name) > d.o.b, address , etc (hover on their d.o.b for example) > second card appears with further info.
Thanks,
Jack
At the moment I just have the initial as a radio button which brings up the first info card, then I have a hover based off of that to show the second info card.
Here's an simple example I made:
#a {
width: 100px;
background: blue;
height: 100px;
}
#a:hover {
background: yellow;
}
#b {
width: 50px;
background: black;
height: 50px;
}
#b:hover {
background: red;
}
<div id="a">
<div id="b">
</div>
</div>
.parent {
width: 100px;
height: 100px;
background-color: lightpink;
}
.child,
.sub-child {
display: none;
width: 100px;
height: 100px;
position: relative;
right: -100px;
}
.child {
background-color: lightgreen;
}
.sub-child {
background-color: lightblue;
}
/* Show the child when hovering on the parent */
.parent:hover .child {
display: block;
}
/* Show the sub-child when hovering on the child */
.child:hover .sub-child {
display: block;
}
/* Not needed, just styling */
div:hover {
outline: 2px solid red;
}
<div class="parent">
<div class="child">
<div class="sub-child"></div>
</div>
</div>
I'm learning to use the CSS float property. I would like to make sense of a specific effect of this property.
Consider the following simple HTML elements:
<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>
And the following CSS rules:
div {
height: 100px;
width: 100px;
}
#div1 {
background-color: blue;
}
#div2 {
background-color: red;
}
p {
background-color: green;
}
If I float: left #div1, #div2 isn't visible anymore (because it is now hidden behind #div1).
I was expecting a similar thing would happen with the paragraph if I were to float: left #div2.
But this is not the case. The paragraph doesn't behave like the div. It doesn't hide behind #div2, but instead sits next to it.
Can somebody explain why there is this difference in behaviour?
Thank you.
Edit1:
Here is the Stacksnippet, with the initial code
div {
height: 100px;
width: 100px;
}
#div1 {
background-color: blue;
}
#div2 {
background-color: red;
}
p {
background-color: green;
}
<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>
Here is the snippet with a float: left declared in the #div1 CSS rule.
div {
height: 100px;
width: 100px;
}
#div1 {
background-color: blue;
float: left;
}
#div2 {
background-color: red;
}
p {
background-color: green;
}
<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>
And here is what happens when I use the same declaration in the #div2 rule:
div {
height: 100px;
width: 100px;
}
#div1 {
background-color: blue;
}
#div2 {
background-color: red;
float: left;
}
p {
background-color: green;
}
<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>
Floating an Element will take this element out of the flow of the non-floating elements. But the TEXT of these other elements will be floated around the floating elements. Try to make your div2 larger and put some more text into it, then you see what I mean.
When I hover the element with class top_bottom_b1, the element with class top_bottom_b2 have to hide. I need to achieve this using css selector. I'm not sure why below code doesn't work.
.top_bottom_b1{
display: block;
width:50px;
height:50px;
background-color:red;
}
.top_bottom_b2{
display: block;
width:50px;
height:50px;
background-color:yellow;
top: 8px;
}
.top_bottom_b1:hover .top_bottom_b2{
display: none;
}
<body>
<div class="top_bottom_b1"></div>
<div class="top_bottom_b2"></div>
</body>
EDIT:
Even if there are multiple elements(as shown below) between and , the css selector (hover) should work.
<div class="top_bottom_b1"></div>
<div></div>
<div></div>
<div></div>
... <!-- N number of divs -->
<div class="top_bottom_b2"></div>
Use the adjacent sibling selector + or if their not director siblings use the general sibling selectors - ~:
.top_bottom_b1 {
display: block;
width: 50px;
height: 50px;
background-color: red;
}
.top_bottom_b2 {
display: block;
width: 50px;
height: 50px;
background-color: yellow;
top: 8px;
}
div > .top_bottom_b2 {
background: blue;
}
.top_bottom_b1:hover ~ .top_bottom_b2 {
display: none;
}
.top_bottom_b1:hover ~ div > .top_bottom_b2 {
display: none;
}
<div class="top_bottom_b1"></div>
<div>I'm in the middle</div>
<div class="top_bottom_b2"></div>
<div>
<div class="top_bottom_b2"></div>
</div>
I have 3 boxes which look like the one in the example. I want to apply a certain style on the non-hovered boxes when a user hovers over a certain box (The boxes are always siblings).
Here is how it should work -
Hover over Box 1 - Box 2 and Box 3 should be greyed
Hover over Box 2 - Box 1 and 3 should be greyed
Hover over Box 3 - Box 1 and 2 should be greyed
.test {
width: 100px;
background-color: #009AFD;
height: 100px;
display: inline-block;
margin-right: 5px;
text-align: center;
}
.test:hover ~ .test {
width: 100px;
background-color: #ddd;
height: 100px;
display: inline-block;
margin-right: 5px;
text-align: center;
}
<div class="test">
Box 1
</div>
<div class="test">
Box 2
</div>
<div class="test">
Box 3
</div>
I can get it working for Box 1. Can somebody help me how I can do it elegantly for Box 2 and 3.
Note: No jQuery or Javascript should be used (which would be a cakewalk in this case).
You can not select “upwards” with current CSS selectors, so 2 and 3 are not possible – not directly. You could put all elements into a common container element, and when that is hovered make all boxes gray, and then the actual box hovered blue again:
.test {
width: 100px;
background-color: #009AFD;
height: 100px;
display: inline-block;
margin-right: 5px;
text-align: center;
}
.container:hover .test {
background:#ddd;
}
.container .test:hover {
background-color: #009AFD;
}
<div class="container">
<div class="test">Box 1</div>
<div class="test">Box 2</div>
<div class="test">Box 3</div>
</div>
(No need btw. to repeat all those properties that stay the same in the hovered state.)
This however will also apply the hover effect when you are not directly hovering one of the boxes, but also when the container element is hovered in the margin between the boxes – so when in between the boxes, all three of them will become gray.
To fight that effect, you need to get a little creative: By not having the boxes laid out in normal flow, but positioning them absolutely instead, you can make the container element take up no space at all, so it won’t be hovered in the “margins” between the boxes. Hovering the boxes themselves however still triggers :hover for the container element, since the boxes are its children and therefor hovering them means hovering the parent element as well, even if the parent element is not “present” in that space where the mouse cursor is hovering over.
.container {
position: relative;
}
.test {
position: absolute;
top: 0;
left: 0;
width: 100px;
background-color: #009AFD;
height: 100px;
display: inline-block;
text-align: center;
}
#box2 {
left: 110px;
}
#box3 {
left: 220px;
}
.container:hover .test {
background: #ddd;
}
.container .test:hover {
background-color: #009AFD;
}
<div class="container">
<div class="test" id="box1">Box 1</div>
<div class="test" id="box2">Box 2</div>
<div class="test" id="box3">Box 3</div>
</div>
Of course then you might have to use some additional trickery to keep following elements in normal flow at the same positions they would take, had the absolute positioning not taken the boxes out of flow (like giving the next element a margin-top or something).
And of course the whole thing only works this “simple”, because you want the color for the siblings of the hovered boxes to be the same. Would you wish for different colors for them, then additional trickery of sorts might be needed.
This will do it:
.test {
width: 100px;
background-color: #009AFD;
height: 100px;
display: inline-block;
margin-right: 5px;
text-align: center;
}
.parent:hover > div {
width: 100px;
background-color: #ddd;
height: 100px;
display: inline-block;
margin-right: 5px;
text-align: center;
}
.parent:hover > div:hover {
background-color: #009AFD;
}
<div class="parent">
<div class="test">Box 1</div>
<div class="test">Box 2</div>
<div class="test">Box 3</div>
</div>
Enclose the divs in a parent div. Use this selector to change all the children: .parent:hover > div. And this selector to exempt the child that is being hovered: .parent:hover > div:hover.
.test:hover ~ .test selects .test elements which are following siblings of a hovered .test element.
Instead, you can try :not(). The selector below will match all .test elements which are not hovered:
.test:not(:hover)
.test {
width: 100px;
background-color: #009AFD;
height: 100px;
display: inline-block;
margin-right: 5px;
text-align: center;
}
.test:not(:hover) {
background-color: #ddd;
}
<div class="test">
Box 1
</div>
<div class="test">
Box 2
</div>
<div class="test">
Box 3
</div>
If you only want to match the non-hovered elements when one is hovered, you can use
:hover > .test:not(:hover)
.test {
width: 100px;
background-color: #009AFD;
height: 100px;
display: inline-block;
margin-right: 5px;
text-align: center;
}
:hover > .test:not(:hover) {
background-color: #ddd;
}
<div class="test">
Box 1
</div>
<div class="test">
Box 2
</div>
<div class="test">
Box 3
</div>
Alternatively, if you want it to work on old browsers that don't support :not(), you can apply the style to all elements, and reset in in the hovered element.
.test {
/* Set styles for non-hovered */
}
.test:hover {
/* Set styles for hovered */
}
.test {
width: 100px;
background-color: #ddd;
height: 100px;
display: inline-block;
margin-right: 5px;
text-align: center;
}
.test:hover {
background-color: #009AFD;
}
<div class="test">
Box 1
</div>
<div class="test">
Box 2
</div>
<div class="test">
Box 3
</div>
.test {
/* Set styles for non-hovered */
}
:hover > .test:hover {
/* Set styles for non-hovered when another is hovered */
}
.test:hover {
/* Set styles for hovered */
}
.test {
width: 100px;
background-color: #009AFD;
height: 100px;
display: inline-block;
margin-right: 5px;
text-align: center;
}
:hover > .test {
background-color: #ddd;
}
.test:hover {
background-color: #009AFD;
}
<div class="test">
Box 1
</div>
<div class="test">
Box 2
</div>
<div class="test">
Box 3
</div>
This question already has answers here:
Is there any way to hover over one element and affect a different element? [duplicate]
(2 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
Currently, when you hover over the blue box both turn yellow, but when you hover over the red box, only it turns yellow.
I need both of them to turn yellow when you hover over either the blue, or the red.
This is as far as I have gotten:
<!DOCTYPE html>
<html>
<head>
<style>
#one {
background-color: blue;
width: 50px;
height: 50px;
float: left;
}
#two {
background-color: red;
width: 50px;
height: 50px;
float: left;
margin-left: 100px;
}
#two:hover {
background-color: yellow;
}
#two:hover ~ #one {
background-color: yellow;
}
#one:hover {
background-color: yellow;
}
#one:hover ~ #two {
background-color: yellow;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
</body>
</html>
here is solution without js
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
JSFIDDLE
Demo
just this
.container:hover div {
background: yellow;
}
Using :before to simulate a hovered div #one...
HTML stays the same
DEMO
CSS
#one {
background-color: blue;
width: 50px;
height: 50px;
float: left;
}
#two {
background-color: red;
width: 50px;
height: 50px;
float: left;
margin-left: 100px;
}
#one:hover, #one:hover ~ #two, #two:hover {
background-color: yellow;
}
#two:before {
content:'';
display:none;
width:50px;
height:50px;
margin-left:-150px;
background-color: yellow;
}
#two:hover:before {
display:block;
}
If you want hover to applied only when child are hovered, then pointer-events can be a way to do this: DEMO
your CSS turns to be more like :
#one {
background-color: blue;
width: 50px;
height: 50px;
float: left;
}
#two {
background-color: red;
width: 50px;
height: 50px;
float: left;
margin-left: 100px;
}
.parent {
pointer-events:none;
overflow:hidden;/* for float , for DEMO purpose to extend body or parent as there would be more content behind childs in real situation. */
}
.parent div {
pointer-events:auto;
cursor:pointer
}
.parent:hover div#one,
.parent:hover div#two
{
background-color:yellow;
}
How does this works ?
pointer-events:none , kills mouse events on parent. Reset to normal to childs.
If you hover a child, then the parent is hovered and the CSS rules parent:hover can be applied.