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>
Related
I'm trying to make a kind of animated website only using CSS Animations with the :target selector
I made up my first cascade and then the main problem is encountered :
I can't animate anymore. Maybe because I am not sure of every lines of the code I am using, that is why I am coming to you.
Basically the effect is actually working on the 2nd link only.
Here is a small piece of my code:
.saq {
width: 110px;
height: 110px;
color: yellow;
margin-left: 815px;
border: 1px black solid;
margin-top: -550px;
transition: 4s ease-in-out;
position: absolute
}
.qaq {
width: 60px;
height: 110px;
margin-left: 1205px;
margin-top: -550px;
transition: 5s ease-in-out;
position: absolute;
display: inline;
cursor: auto;
background-color: black;
z-index: 1000
}
a {
font-size: 100px;
text-align: right
}
;
.navi {
margin-left: 400px;
transform: translate(300px, 200px);
}
nav a {
background-color: yellow;
display: inline-block
}
nav a:hover {
background-color: brown;
color: yellow;
}
#s1:target {
display: block;
transition: all 4s ease;
transform: translate(300px, 350px) rotate(90deg) scale(0.6);
overflow: hidden;
overflow-y: hidden
}
#move #s1:target~.saq {
transform: translateY(-1720px)
}
#move #s1:target~.qaq {
transform: translateY(-1720px)
}
<div id=move>
<nav class=navi id=s1>
<ul>Home</ul>
<ul>Creations</ul>
<ul>About</ul>
<ul>Contact</ul>
</nav>
<div class="qaq"></div>
<div class="saq"></div>
Here is the link of the page : http://faxe-kondi.16mb.com/bru.html
Here what I have done so far, is a lot of div moving after the #s1 is targeted.
What i am looking to do : Making a lot of div move after the #s3 is targeted.
Maybe it is a selector problem, or children/sibling, or maybe I cannot use two animation on the same div.
But of course there is a solution you can bring to me.
The :target selector works alright in your code. But you only use it for the #s1:target rule. Which in your HTML is only the second link.
For example:
.links>a {
display: inline-block;
width: 50px;
height: 50px;
}
.link1 {
background: red;
}
.link2 {
background: blue;
}
.link3 {
background: green;
}
.animated-box {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50px;
transition: border-radius 1s;
}
.animated-box:target {
border-radius: 0;
}
#box1 {
background: red;
}
#box2 {
background: blue;
}
#box3 {
background: green;
}
<div class="links">
<a class="link1" href="#box1"></a>
<a class="link2" href="#box2"></a>
<a class="link3" href="#box3"></a>
</div>
<div class="animated-box" id="box1"></div>
<div class="animated-box" id="box2"></div>
<div class="animated-box" id="box3"></div>
See, the difference here is how you apply the transition-effect (border-radius: 0). If you want to target only one element you can go with a selector like #s1:target but it then will only happen in case the element with id="s1" gets the target (meaning, the link with href="#s1" gets clicked).
You either want to specify more CSS rules like you did with #s1:target or you want to use a class instead like I did below.
can you test it?
<div id=move>
<nav class=navi id=s1>
<ul>Home</ul>
<ul>Creations</ul>
<ul>About</ul>
<ul>Contact</ul>
</nav>
<div class="qaq"></div>
<div class="saq"></div>
</div>
I want to change the background-color of a box after clicking on it and at the same time create another box with pure CSS. I tried it with the target selector. But I only can manage to do one of them asks and not both at the same time.
Here is a DEMO of my try.
/* fonts */
p {
font-size: 10px;
}
#school::after,
#work::after {
font-size: 10px;
content: "Second box";
color: white
}
/* white boxes */
.panel {
height: 50px;
width: 50px;
background-color: white;
border: 1px solid #262626;
position: relative;
}
/* span (100%, 100%) inside the white-boxes */
.panel span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/* second-box */
.panel div {
display: none;
}
/* if white-box is targeted, this lets the second-box appear */
.panel div:target {
display: block;
height: 50px;
width: 50px;
background-color: blue;
border: 1px solid black;
border-radius: 4px;
position: absolute;
left: 70px;
}
/* for testing purposes */
.panel:active span {
background-color: black;
}
<p>White Boxes</p>
<div class="panel">
<a href="#school">
<span></span>
</a>
<div id="school"></div>
</div>
<div class="panel">
<a href="#work">
<span></span>
</a>
<div id="work"></div>
</div>
You can modify the presentation of any number of elements using the :target pseudo-class, so long as each one is nested within the element with the id which is :targeted:
/* fonts */
p {
font-size: 10px;
}
#school div::after, #work div::after {
font-size: 10px;
content: "Second box";
color: white
}
/* white boxes */
.panel {
height: 50px;
width: 50px;
background-color: white;
border: 1px solid #262626;
position: relative;
}
/* span (100%, 100%) inside the white-boxes */
.panel span {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
}
/* second-box */
.panel a div {
display: none;
}
/* if white-box is targeted, this lets the second-box appear */
.panel a:target div {
display: block;
height: 50px;
width: 50px;
background-color: blue;
border: 1px solid black;
border-radius: 4px;
position: absolute;
left: 70px;
}
/* if white-box is targeted, this gives the box a blue background */
.panel a:target span {
background-color: blue;
}
/* for testing purposes */
.panel:active span {
background-color: black;
}
<p>White Boxes</p>
<div class="panel">
<a href="#school" id="school">
<span></span>
<div></div>
</a>
</div>
<div class="panel">
<a href="#work" id="work">
<span></span>
<div></div>
</a>
</div>
:target is only for one element at same time, because you can't target two anchors at same time. You need javascript or a css trick with :checked
Solution with pure css :checked
http://jsfiddle.net/KNG6n/78/
What I make:
<div class="panel">
<label>
<input type="checkbox">
<div></div>
</label>
</div>
CSS
label {
display:block;
position: relative;
width: 100%;
height: 100%;
}
label input {
visibility: hidden;
}
label input:checked + div {
display: block;
}
I see an answer was accepted already, but will post my solution if anyone else is interested.
I changed the location of the div to be before the link and added a css rule.
new code:
<p>White Boxes</p>
<div class="panel">
<div id="school"></div>
<a href="#school">
<span></span>
</a>
</div>
<div class="panel">
<div id="work"></div>
<a href="#work">
<span></span>
</a>
</div>
CSS added:
.panel div:target+a span{
background-color: black;
}
Demo:
http://jsfiddle.net/KNG6n/81/
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.
I have two divs, one inside the other. When I hover over the outer one, I would like to change its color, no problem. But when I hover over the inside one I would like to change only its color. Is this possible? In other words, when hovering over the inner div, I would like to see the out red "ring".
<div id="test"><div></div></div>
#test {
background-color: red;
position: relative;
width: 100px;
height: 100px;
}
#test:hover {
background-color: white;
}
#test div {
background-color: green;
position: absolute;
top: 20px;
left: 20px;
width: 60px;
height: 60px;
}
#test div:hover {
background-color: white;
}
Not with plain CSS. If you're hovering over a child, you are necessarily hovering over its parent(s).
However CSS4 plans include something that may help:
#test! div:hover {background-color: red;}
The ! will make #test the subject of the selector, so it will select #test if it contains a div:hover, and re-apply the red background to it.
Not nesting the div will work.
See this fiddle:
HTML:
<div id="test"></div>
<div id="ttt"></div>
CSS:
#test {
background-color: red;
position: relative;
width: 100px;
height: 100px;
}
#test:hover {
background-color: white;
}
#ttt {
background-color: green;
position: absolute;
top: 20px;
left: 20px;
width: 60px;
height: 60px;
}
#ttt:hover {
background-color: white;
}