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;
}
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 want to center the text "name" horizontally and vertically inside the div "firstquad". I want the div to have 100% width and 25% height. But the div has much more than 100% width. For the text, I have set the top and left as 50%. The text should be centered and the div should fit the page horizontally but its like this. Any help?
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 25%;
top: 0%;
text-align: center;
background-color: blue;
}
#name {
position: relative;
top: 50%;
left: 50%;
color: white;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
Both div and h1 are block level elements by themselves.
Block level elements behave in such a way that
they create a line break before and after themselves
they grab as much horizontal space as they can get
Which means that with <div><h1></h1></div> you have a div that grabs as much horizontal space as available (full page width). Inside it, the h1 behaves the same, consuming all horizontal space that the surrounding div allows.
Now with position: relative; left: 50%; you do not change the width of the h1 - you simply change the position, where its rendering starts. Obviously, this leads to the h1 moving partly outside the div. Add borders so you understand:
body { margin: 30px; }
div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; }
<div><h1>Test</h1></div>
Now move the h1 (only slightly, so the effect is visible better):
body { margin: 30px; }
div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; position: relative; left: 20px; }
<div><h1>Test</h1></div>
css:
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 25%;
top: 0%;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
#name {
color: white;
}
body {
margin: 0%;
height: 100%;
background-color: cornsilk;
}
#firstquad {
height: 25%;
background-color: blue;
text-align: center;
}
#name {
color: white;
margin: 0;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
Is this what you are looking for?
Just change #name to #name {
color: white;
}
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 50%;
text-align: center;
background-color: blue !important;
}
#name {
color: white;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
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 have been struggling with this for two days now, though it looks very simple.
As you see the footer i created in the picture here:
I have two problems:
I cannot seem to apply any css modifications on the footer inside the text ("Capgemini newcomer application")
I cannot add a line separating the rest of the page from the footer without intercepting the logo or applying a margin between the page content and the footer like shown in the next photo:
HTML code
<ion-footer-bar class="bar">
<img src="img/Imag.png" class="test2" />
<div class="text"> Capgemini Newcomer Application </div>
<img src="img/Test3.png" class="test"/>
</ion-footer>
CSS code
.bar {
position: absolute;
margin-top: 20px;
height: 50px;
border-top: 2px solid #FBC02D;
}
.bar .test {
float: right;
clear: left;
position: fixed;
max-width: 130px;
max-height: 100px;
right: 0;
bottom: 2px;
}
.bar .test2 {
width: 40px;
height: 40px;
bottom: 20px;
}
.bar .text {
text-align: center;
font-size: 6;
bottom: 2px;
}
EDIT
After doing the modifications mentioned below, i got this:
<ion-footer-bar ng-class="{'bar': true}">...</ion-footer>
There are a couple of issues with your CSS that don't work like you would expect:
.bar {
position: absolute;
margin-top: 20px; /* doesn't do anything for position: absolute */
height: 50px;
border-top: 2px solid #FBC02D; /* <-- this will always add the border outside the footer */
}
.bar .test {
float: right;
clear: left;
position: fixed; /* <-- either you float it, or you position it fixed - both together don't make sense */
max-width: 130px;
max-height: 100px;
right: 0;
bottom: 2px;
}
.bar .test2 {
width: 40px;
height: 40px;
bottom: 20px; /* <-- "bottom" on a non-positioned element doesn't do anything */
}
.bar .text {
text-align: center;
font-size: 6; /* <-- font size needs a unit like "px" or "pt" */
bottom: 2px; /* same as above, this should probably be margin-bottom instead */
}
Cleaned up, it could look like this:
.bar {
position: absolute;
height: 50px;
}
.bar .test {
position: fixed;
max-width: 130px;
max-height: 100px;
right: 0;
bottom: 2px;
}
.bar .test2 {
width: 40px;
height: 40px;
margin-bottom: 20px;
}
.bar .text {
text-align: center;
font-size: 6pt;
margin-bottom: 2px;
border-top: 2px solid #FBC02D;
}
This will still overlap the logo with the border, but that's a problem that you need to fix in the logo image.
I would like to get result something like this:
◄ ███████ ►
Is it possible to make arrows with pseudo-elements :before and :after?
JSFiddle example which demonstrates the problem
<div class="scroll"></div>
.scroll {
width: 100px;
}
.scroll::before {
content: "◀";
}
.scroll::after {
content: "▶";
}
Here it is.
.scroll {
width: 100px;
background-color: grey;
margin: 0 1.2em;
position: relative;
overflow: visible;
min-height: 1.2em;
}
.scroll:before,
.scroll:after {
position: absolute;
color: grey;
min-height: 1.2em;
width: 1.2em;
top: 50%;
transform: translateY(-50%);
line-height: 1.3em;
text-align: center;
}
.scroll:before {
content: "◀";
right:100%;
}
.scroll:after {
content: "▶";
left: 100%;
}
<div class="scroll"></div>
Update. Following discussion in chat, here's how I'd style custom scrollbars on a div. Please note that as of now they are just painted, the div changes size based on content. I know nothing about the logic behind your need to paint scrollbars instead of trusting browsers with it. :)
This is sort of a hack but it works. It involves setting margins.
Here is the updated fiddle
https://jsfiddle.net/j08L8a3b/1/
.scroll {
width: 100px;
margin-left: auto;
margin-right: auto;
background-color: grey;
}
.scroll::before {
content: "◀";
color: grey;
margin-left: -20px;
background-color: white;
height: 100%;
min-height: 100%;
}
.scroll::after {
content: "▶";
margin-left: 120px;
color: grey;
background-color: white;
}