The goal
Change an element by hovering another with CSS.
The problem
I don't know the syntax. Any ideas?
Code spotlight
I want to change .frame by hovering .app > a. The CSS syntax is spotlighted below:
.app a:hover ->¹ .frame {
background-color: yellow;
}
.frame {
background-color: blue;
width: 300px;
height: 300px;
}
¹ just illustration.
(Also available in jsFiddle)
Try this on for size:
.app:hover ~ .frame {
background-color: yellow;
}
.frame {
background-color: blue;
width: 300px;
height: 300px;
}
Demo: http://jsfiddle.net/maniator/jWA3s/1/
Reference: What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
Related
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 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;
}
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;
}
I want to show second div (in HTML) with class dikha on cursor hover over anchor tag.
HTML CODE:
<a>Hover over me!</a>
<div class="faraz"> sdjfg </div>
<div class="dikha">Stuff shown on hover</div>
STYLE
div {
display: none;
}
a:hover > div:nth-child(2) {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}
Write like this:
a:hover ~ .dikha {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}
You need to use the adjacent siblings selector ~. Also, the div you want to show is the third child, not the second (because the <a> is the first).
div {
display: none;
}
a:hover ~ div:nth-child(3) {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}
Demo: http://jsfiddle.net/3eFhf/
you can use javascript function here.
< onmouseover="document.getElementById('myid').style.display='block'">
< id="myid" class="dikha">
Your dikha class should be hidden by default
.dikha { display:none; }
you can also use jquery slidetoggle method to achieve this