I have following mark up:
<div class="one">Content</div>
<div class="two"></div>
and following style sheets:
.one, .two {
height: 20px;
}
.one {
background-color: #f00;
}
.two {
background-color: #0f0;
margin-top: -10px;
}
Why is the text Content visible, but the red background is not? I would expect the text also to be only partly visible due to the given style sheets.
For your convenience, I also created a jsFiddle.
If you want that text of first div would be only partly visible, you need to use position and z-index.
.one, .two {
height: 20px;
}
.one {
background-color: #f00;
position: relative;
z-index: 1;
}
.two {
background-color: #0f0;
margin-top: -10px;
position: relative;
z-index: 2;
}
http://jsfiddle.net/v5LfZ/2/
Related
Here's a fairly simple jsfiddle. When I over over the blue square, the blue square's CSS hover state triggers (causing it to turn white). When I hover over the red square, the same thing happens with the red square.
What I want is when I hover over the overlap, that I trigger the hover states on both the red and blue square. Is this possible?
Specifically, can I indicate somehow that a hover state should trigger, but that it should also pass through to any element behind it?
Additionally, I'd like to do this in pure CSS. I'm sure it can be done with JS.
(The real code is more complicated, of course.)
Here's the full code:
HTML:
<div class="a">
<div class="b">
b
</div>
<div class="c">
c
</div>
</div>
CSS:
.a {
position: relative;
}
.b {
width: 40px;
height: 40px;
top: 5px;
left: 5px;
position: absolute;
background-color: blue;
}
.b:hover {
background-color: white;
}
.c {
width: 40px;
height: 40px;
top: 25px;
left: 25px;
position: absolute;
background-color:red;
}
.c:hover {
background-color: white;
}
If you don't mind editing your HTML slightly, there is a way to do this by adding another div in the HTML and using the CSS general sibling combinator (~), but it's still quite hacky and mostly side-steps the problem.
It's just creating a third div, changing its box so that it sits right in the overlap between .b and .c, and selecting .b and .c when it's hovered in the CSS to edit their styles.
jsfiddle
HTML
<div class="a">
<div class="overlap"></div>
<div class="b">
b
</div>
<div class="c">
c
</div>
</div>
CSS
.a {
position: relative;
}
.b {
width: 40px;
height: 40px;
top: 5px;
left: 5px;
position: absolute;
background-color: blue;
}
.b:hover {
background-color: white;
}
.c {
width: 40px;
height: 40px;
top: 25px;
left: 25px;
position: absolute;
background-color:red;
}
.c:hover {
background-color: white;
}
.overlap {
position: absolute;
top: 25px;
left: 25px;
/* w = leftOfC - leftOfB
h = topOfC - topOfB*/
width: calc(25px - 5px);
height: calc(25px - 5px);
background-color: none;
z-index: 2;
}
/* select .b and .c as siblings of the overlap div */
.overlap:hover ~ .b, .overlap:hover ~ .c {
background-color: white;
}
I am pretty new to css. I have defined a dot element with different collors.
/*Dots*/
.ccrdot {
display: inline-block;
position: absolute;
background-color: #8d8d8d;
border-radius: 50%;
opacity: 0.5;
width: 10px;
height: 10px;
pointer-events: none;
}
.ccrdot.red {
background-color: #FF0000;
}
.ccrdot.yellow {
background-color: #fffb09;
}
.ccrdot.green {
background-color: #67ff09;
}
But when i use this like:
> <span class="ccrdot"></span><span>Text Text Text</span>
<span class="ccrdot"></span> Text Text
or
<div class="ccrdot"></div> Text Text
The text slides under the dot element. I want to present them side by side. What did i do wrong?
Thank you.
position: absolute takes them out of the text flow, so there's no space reserved for them anymore, if you remove it they'll have their own space.
/*Dots*/
.ccrdot {
display: inline-block;
background-color: #8d8d8d;
border-radius: 50%;
opacity: 0.5;
width: 10px;
height: 10px;
pointer-events: none;
}
.ccrdot.red {
background-color: #FF0000;
}
.ccrdot.yellow {
background-color: #fffb09;
}
.ccrdot.green {
background-color: #67ff09;
}
/* I don't know why my code won't show my back ground. Please help
header {
z-index: 1;
position: relative;
background: #fff;
padding-bottom: 15px; {
header .banner {
background: url("http://www.hhbeautysupply.com/modules/blockbanne/img/2ff10e96da748ecea3b41289ad8dfb39.jpg") repeat-x #891C21;}
}
}
Your element .banner needs height and width rules.
Further: Your css is not properly formatted (unless you are using a preprocessor like sass) it should look like this:
header {
z-index: 1;
position: relative;
background: #fff;
padding-bottom: 15px;
}
header .banner {
background: url("http://www.hhbeautysupply.com/modules/blockbanne/img/2ff10e96da748ecea3b41289ad8dfb39.jpg") repeat-x #891C21;
//height and width rules
}
DEMO
div {
background: red;
padding: 10px;
}
.foo {
background: url("http://lorempixel.com/400/200/") repeat #891C21;
height: 200px;
width: 100%;
}
<div>
<div class="foo"></div>
</div>
I am wanting to create two identical nav bars on a site. What I want to do is "link" the :hover effects on each nav bar, so that when one link on NavBar1 is hovered, not only does the :hover effect display on NavBar1, but the same :hover effect should display simultaneously on the corresponsing link on NavBar2.
I've managed to get this to work one-way by using the adjacent sibling combinator in my CSS, but my problem is I can't seem to get it to work in reverse. In other words, when hovering over Link1 in NavBar1, the :hover effect displays on Link1 in NavBar1 and Link1 in NavBar2. However, when hovering over Link1 in NavBar2, the :hover effect displays on Link1 in NavBar2 only (because the adjacent sibling combinator affects only the element following it, not the preceding element).
Is it possible to achieve what I'm wanting to do here?
See what I mean here if I haven't explained clearly: http://jsfiddle.net/9AbvE/697/
This isn't exactly what I'm wanting. I need each nav bar to be in separate divs, but I haven't been able to get the effect to work yet by doing so. I've thrown this code together just to give readers an idea of what I'm trying to accomplish.
Notice the difference between selecting Link1 in the first list of links verses the second. I want the same effect when moving back and forth, and not just one-way (i.e. selecting the bottom "Link1" should turn both "Link1"'s black, just like selecting the top one does).
You could always fake it by "linking" the two using a common parent element: http://jsfiddle.net/jjordanca/TNeZU/
HTML:
<div id="navbar">
<div id="linkone">
<a class="one" href="#">Link1</a>
<a class="one" href="#">Link1</a>
</div>
<div id="linktwo">
<a class="two" href="#">Link2</a>
<a class="two" href="#">Link2</a>
</div>
<div id="linkthree">
<a class="three" href="#">Link3</a>
<a class="three" href="#">Link3</a>
</div>
</div>
CSS:
a {
text-decoration: none;
color: red;
margin-right: 20px;
padding: 0 10px;
}
#navbar {
border: 1px solid red;
width: 500px;
margin: 50px;
padding: 20px;
height: 100px;
position: relative;
}
#navbar div {
text-align: center;
width: 100px;
}
/* LINK 1 */
#linkone {
position: absolute;
}
.one + .one {
position: absolute;
top: 80px;
left: 0;
}
#linkone:hover {
color: #000;
background-color: #008800;
}
.one {
position: absolute;
left: 0;
color: inherit;
background-color: inherit;
}
/* LINK 2 */
#linktwo {
position: absolute;
left: 80px;
}
.two + .two {
position: absolute;
top: 80px;
left: 0;
}
#linktwo:hover {
color: #000;
background-color: #008800;
}
.two {
position: absolute;
left: 0;
color: inherit;
background-color: inherit;
}
/* LINK 3 */
#linkthree {
position: absolute;
left: 140px;
}
.three + .three {
position: absolute;
top: 80px;
left: 0;
}
#linkthree:hover {
color: #000;
background-color: #008800;
}
.three {
position: absolute;
left: 0;
color: inherit;
background-color: inherit;
}
I have an element that looks something like this:
___
| X|
‾‾‾
So essentially a tiny box with a button to close it.
I have also applied CSS to the element, so that when hovered, it will turn to something like this:
___________________
| X|
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Simply put, it'll just become wider.
Now. what I want to do is that whenever the user hovers over the close button (X), the box will not change its size.
But when the user hovers on anywhere else on the box, it would behave as suggested.
Is this possible with pure CSS?
EDIT: Sorry that I added this late, but the answers should be based around this example: http://jsfiddle.net/fpY34
Using the markup you have, I have no clue how to do it without fixed widths, and absolute nastiness. But here's me giving my all! http://jsfiddle.net/fpY34/15/
<div id='outer'>
<div id='notOuter'>
<div id='content'>
<div id='img'>
</div>
<div id='label'>
Text example
</div>
<div id='closeButton'>
X
</div>
</div>
</div>
</div>
and the beauty:
#outer { height: 30px; }
#notOuter {}
#content { float: left; position: relative; }
#closeButton { background: #0f0; position: absolute; top: 0; left: 30px; width: 30px; height: 30px;}
#img { background: #f0f; width: 30px; height: 30px; position: absolute; left: 0; top: 0; }
#label { display: none; position: absolute; left: 0; top: 0; width: 60px; height: 30px; background: #f00; }
#img:hover { width: 60px; z-index: 10; }
#img:hover + #label,
#label:hover { display: block; z-index: 20; }
#img:hover ~ #closeButton,
#label:hover + #closeButton { left: 60px; }
would you check this please and tell me if that what you want ?
http://jsfiddle.net/UjPtv/10/
<style>
.divs
{
height: 20px;
width: 100px;
border: 1px solid;
padding: 5px 3px;
}
.divs:hover
{
width: 50px;
padding-left: 150px
}
</style>
<div class="divs"><span>X</span></div>
You could float them:
<div class="box">
<div>
Content
</div>
<span>X</span>
</div>
.box {display:inline-block;border:1px solid black}
.box div {width:100px;float:left}
.box div:hover {width:200px}
.box span {float:left}
Might not work in older browsers though.