This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed 6 months ago.
Found this guide (https://www.w3schools.com/howto/howto_css_display_element_hover.asp) and I'm trying to see how to use it so that hover over one div can affect another.
I created this codepen: https://codepen.io/thewizck/pen/PoRyWRy
<style>
.hide {
opacity: 0;
}
.myBPbtn {
color: #000000;
}
.myBPbtn:hover + .hide {
opacity: 1;
color: red;
}
.myBPpin:hover + .myBPbtn {
color: red !important;
}
</style>
<div class="myBPbtn">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
<div class="myBPpin">I want to change the color of the "Hover over me." text when someone hovers over me.</div>
My question, why isn't the first line changing to red when the last line is hovered on?
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
On hover of child, change background color of parent container (CSS only)
(3 answers)
Closed 7 months ago.
i tried multiple selectors but couldnt get anything out.
html:
<div class="backg">
<div class="colors color1">red</div>
<div class="colors color2">blue</div>
<div class="colors color3">green</div>
</div>
css:
.backg{
display:flex;
flex-flow:row wrap;
padding:1cm;
justify-content: space-evenly;
border:5px double black
}
.color1{
border: 5px solid red;
}
.color1:hover{
background-color: red;
}
the .color1:hover attribute should turn the whole page to red and similarly for other two divs
one thing i tried was the :root selector to change the body background but failed.
This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I tried implementing :hover specifically on a link that's inside a paragraph.
the p.hop is hidden but when I hover over the link, nothing happens.
.hop {
display: none;
}
a.hop2:hover + .hop {
display: block;
}
<p>A playlist for happy coding.</p>
<p class="hop">Keep your code close but your playlist closer.</p>`
The + sign selector is used to select the elements that are placed immediately after the specified element but not inside the particular elements.
.hop is not next to the link so that is not working, You can use span next to a tag and get the same result.
.hop {
display: none;
}
a.hop2:hover + .hop {
display: block;
}
<p>A playlist for happy coding.
<span class="hop">Keep your code close but your playlist closer.</span></p>
This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
I want to change the background color of the box once i check the checkbox, but it doesn't work with the code i wrote. am i missing something? thanks
.box{
width: 100px;
height: 100px;
background-color: green;
}
input[type="checkbox"]:checked .box{
background-color: red;
}
<input type="checkbox" name="" />
<div class="box"></div>
this rule doesn't work because .box is not in input
input[type="checkbox"]:checked .box
but you can use adjacent sibling combinator:
input[type="checkbox"]:checked + .box
or general sibling combinator:
input[type="checkbox"]:checked ~ .box
This question already has answers here:
CSS3 selector :first-of-type with class name?
(10 answers)
Closed 4 years ago.
Having some issues targeting the a div using the CSS :first-of-type and applying the styling to all. Any ideas on where I'm going wrong?
Working example here
.message:first-of-type {
background: purple;
}
If you want purple background only for first .message use below css. Pseudoclass :first-of-type it's only for type (div, p etc), not class.
.message {
background: purple;
}
.message ~ .message {
background: none;
}
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 7 years ago.
Say I have the following -
<div>
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>
Is there a way to use CSS to modify the style of each separately, without having to apply a unique class in each case?
For example, something like div span { color: blue; } but then apply a different colour to the subsequent span and so on?
(...and yes, I have tried many Google searches first!)
Try nth-of-type or nth-child:
span:nth-of-type(1) {
color:blue;
}
span:nth-of-type(2) {
color:red;
}
span:nth-of-type(3) {
color:green;
}
here is the code example