I've started with css just day ago so I'm new to this.I'd like to achieve moving blue rectangle when I move mouse on red rectangle.I'm sure hover is able to handle this event, but I don't really know how to work with parent/child relationship.Thank you.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
#first
{
width:50px;
height:50px;
position: relative;
top:100px;
left:100px;
background: red;
}
#second
{
width:50px;
height:50px;
position: relative;
top:200px;
left:200px;
background: blue;
transition: left 1s;
}
#first:hover + #second
{
left:250px;
}
</style>
<div id="first">
<div id="second"></div>
</div>
</body>
</html>
Use child > selector as + is for siblings:
#first:hover > #second
{
left:250px;
}
Demo
Use the child selecter (>) not sibling selector (+)
DEMO HERE
#first:hover > #second
{
left:250px;
}
Related
Let's say I have to divs named "A" and "B", respectively.
<div id="A">
<div id="B">
</div>
</div>
div A has a z-index of 1 and has a width and height of 100%.
div B has a z-index of 2 and has a width and height of 50% and a top and left of 25%;
#A{
position:absolute;
width:100%
height:100%;
top:0%;
left:0%;
z-index:1;
background-color:black;
}
#B{
position:absolute;
width:50%;
height:50%;
left:25%;
top:25%;
z-index:2;
background-color:gray
}
If you were to hover over Div A and Div B at the same time, Div A will still register as being hovered over. In this hypothetical scenario, whenever I hover over Div A, I want Div A to turn Red and Div B to turn Gray, and whenever I hover over Div B, I want Div B to be Blue and Div A to be Black. How can I do this? I would prefer a CSS answer if there is one available.
I would think using #A:not(hover){} would work, but when I tried it, it failed.
Your hypothetical situation already exists in the way that you you want:
Hovering over A turns A red and B gray
Hovering over B turns B blue and A red
#A {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: 1;
background-color: black;
}
#A:hover {
background: red;
}
#B {
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 2;
background-color: grey;
}
#B:hover {
background: blue;
}
<div id="A">
<div id="B"></div>
</div>
However, if you really do want to stop <div> #A from being hovered over when <div> #B is hovered over, you can make use of a sibling element, as is described in this answer.
Hope this helps! :)
You cannot achieve what you're trying to do with CSS. The hover feature only allows you to change the attributes of that one element. I would recommend using JQuery.
$(document).ready(function(){
$("#A").hover(function(){
$("#A").css("background-color", "red");
$("#B").css("background-color", "gray");
});
/* Continue writing other hover functions */
});
JQuery allows you to style multiple elements given an action
You can't with pure css, you must help of jquery :
Part of Css:
#A:hover {
background-color: red;
}
#B:hover {
background-color: blue;
}
Part of jQuery:
$('#B').hover(function(){
$('#A').css('background-color','black');
},function(){
$('#A').css('background-color','red');
})
$(document).ready(function(){
$('#B').hover(function(){
$('#A').css('background-color','black');
},function(){
$('#A').css('background-color','red');
})
})
#A {
position:absolute;
width:100%;
height:100%;
top:0%;
left:0%;
z-index:1;
background-color:black;
border: 1px solid;
}
#B {
position:absolute;
width:50%;
height:50%;
left:25%;
top:25%;
z-index:2;
border: 1px solid;
background-color: gray;
}
#A:hover {
background-color: red;
}
#B:hover {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="A">
<div id="B">
</div>
</div>
I found a pure css way using the link from Obsidian Age's answer:
<div id="ContainerDiv">
<div id="A"></div>
<div id="B"></div>
</div>
http://jsfiddle.net/k3Zdt/248/
All I had to do was take Div B out of Div A and remove the z-indexes.
I need to make a layout in CSS, somewhat like this.
Green & red are 2 squares on left and right corners respectively. How do I make Yellow region occupy all the space in between, and also align the text in ('Login', in the screenshot) as centered.
Also I tried couple of things with Twitter-Bootstrap too. col-md-1, pull-left etc. didn't quite achieve what I intended. Any help is appreciated.
Here is my working code (without any Bootstrap)
<head>
<style>
#myContainer{
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
}
#leftLogo{
width:40px;
height:40px;
background-color: green;
float:left;
}
#rightLogo{
width:40px;
height:40px;
background-color: red;
float:right;
}
#labelText{
height:40px;
float:left;
width:100%-80px;
background-color: #f3ff11;
}
</style>
</head>
<body>
<div id="myContainer">
<span id="leftLogo"></span>
<center>
<span id="labelText"><H2>Login</H2>></span>
</center>
<span id="rightLogo"></span>
</div>
You can use display:table and display:table-cell to achieve this.
First fix your markup:
<div id="myContainer">
<span id="leftLogo"></span>
<span id="labelText"><h2>Login</h2></span>
<span id="rightLogo"></span>
</div>
Then your CSS:
div, span, h2 {
margin:0;
padding:0;
}
#myContainer {
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
display:table;
}
#leftLogo, #rightLogo, #labelText {
display:table-cell;
height:40px;
}
#leftLogo, #rightLogo {
width:40px;
}
#leftLogo {
background-color: green;
}
#rightLogo {
background-color: red;
}
#labelText {
text-align:center;
background-color: #f3ff11;
}
Demo: http://jsfiddle.net/TjGC3/
You can use position:absolute; to position your colored squares inside a wrapper with position:relative and width:100%;
FIDDLE
HTML:
<div id="myContainer">
<div id="labelText">
<span id="leftLogo"></span>
<H2>Login</H2>
<span id="rightLogo"></span>
</div>
</div>
CSS:
#myContainer{
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
}
#leftLogo{
width:40px;
height:40px;
background-color: green;
position:absolute;
top:0;
left:0;
}
#rightLogo{
width:40px;
height:40px;
background-color: red;
position:absolute;
top:0;
right:0;
}
#labelText{
height:40px;
width:100%;
background-color: #f3ff11;
position:relative;
text-align:center;
}
h2{
line-height:40px;
margin:0;
padding:0;
}
I'm trying to style 2 divs in a button tag (1 div will hold an icon & another a descriptive text, please note I can't change the html tags).
In IE7, the 2 divs in a div sit side-by-side whereas the same 2 divs in a button tag sit 1 below the other.
Is there something specific with a button tag to arrange the dive 1 below each other and can it be overridden by any IE7 hacks or css tricks ?
<!DOCTYPE html>
<html>
<head>
<style>
button {
display:block;
float:left;
clear:none;
}
.div1 {
border:1px solid red;float:left;
}
.div2 {
border:1px solid red;float:left;
}
.div3 {
border:1px solid cyan;float:left;
}
</style>
</head>
<body>
<button><div class="div1">div1</div><div class="div2">div2</div></button>
<div class="div3"><div class="div1">div1</div><div class="div2">div2</div></div>
</body>
</html>
try this
in IE7 width is compulsory
button {
float:left;
clear:none;
width:80px;
}
.div1 {
border:1px solid red;float:left;
}
.div2 {
border:1px solid red;float:left;
}
.div3 {
border:1px solid cyan;float:left;
}
If you don't want to give the button a width, this is as close as I could come.
<!DOCTYPE html>
<html>
<head>
<style>
button {
/* no styles */
}
.div1 {
display:inline;
border:1px solid red;
}
.div2 {
display:inline;
border:1px solid red;
}
.div3 {
display:inline;
border:1px solid cyan;
}
</style>
</head>
<body>
<button><div class="div1">div1</div><div class="div2">div2</div></button>
<div class="div3"><div class="div1">div1</div><div class="div2">div2</div></div>
</body>
</html>
Now this is far from ideal, I can see that, but maybe it'll give you something to start with.
the z-index in "div.dialog" doesnt seem to influ the layer index? the "div.dialog" div has to be on top of everything
EDIT:
div.dialog_bg has to be in the background
#topfix has to be on top of that
div.dialog has to be on top of everything
code...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body style="margin:0px">
<style>
#topfix {
position:fixed;
top:0px;
left:0px;
width:100%;
height:130px;
z-index:1;
background:#ff0000;
}
#div_dialog {
position:relative;
z-index:1;
}
div.dialog {
position:absolute;
background:#ffffff;
border:1px solid #000000;
width:400px;
height:300px;
top:50px;
left:100px;
z-index:99; // doesnt seem to influ the layer index
}
div.dialog_bg {
position:absolute;
background:#ffff00;
width:100%;
height:500px;
opacity:0.3;
}
</style>
<div id="div_dialog">
<div class="dialog_bg"></div>
<div class="dialog">test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</div>
</div>
<div id="topfix">
topfix
</div>
</body>
</html>
Then you need to give its parent #div_dialog at least z-index: 2 because the z-index is relative to its parent and dialog is the only child of #div_dialog.
Also z-index: 1 for #div_dialog isn't enough because #topfix comes after it in HTML and will be placed over #div_dialog.
EDIT
So regarding your "new" you have to give
#div_dialog {
position: absolute;
z-index: 9999;
}
.dialog_bg {
z-index: 1;
}
.dialog {
z-index: 2;
}
I have a problem with a website I'm putting together. I have a simple div layout. Which is as follows:
<body>
<div id="Container">
<div id="Logo"></div>
<div id="Banner">
<div id="Nav"></div>
</div>
<div id="Content">
</div>
<div id="footer">Footer</div>
</div>
</body>
And my CSS is as follows:
#charset "utf-8";
/* CSS Document */
html, body {
height:100%;
padding:0;
margin:0;
background-image:url(../layout.img/background_gradient.gif);
background-repeat:repeat-x;
}
#Container {
height:100%;
width:950px;
margin:auto;
background-color:#FFFFFF;
border-left:1px solid #333333;
border-right:1px solid #333333;
}
#Logo {
width:160px;
height:160px;
float:right;
}
#Banner {
width:100%;
height:160px;
}
#Nav {
width:550px;
height:33px;
position:relative;
top:100px;
left:50px;
}
#Content {
clear:both;
}
And finally the result can be seen here:
http://jsfiddle.net/mczMS/
As you can see the 'container' div doesn't stretch out with the content as you scroll down the page. I know this is probably something stupidly simple but I'm running short of brain power today. Haha.
Try adding:
#container { min-height: 100%; }
after height 100%. You may also want to try:
#container { overflow: auto; }
If you remove the height:100% from the container it will stretch to fit its contents.