Here is an example code that demonstrate the issue
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
<div>
<div class="under">
Hello!
</div>
<div class="over" data-comment="I am invisible">
</div>
</div>
When the mouse hovers over the over div, I want the under div to be aware of the hover event and, in this case, change the border accordingly.
However the over div is apparently intercepting the hover event. Can there be a pure css solution to pass the hover event to the under div?
Pointer events to the rescue!
Just set pointer-events: none; to the .over.
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
pointer-events: none;
}
<div>
<div class="under">
Hello!
</div>
<div class="over" data-comment="I am invisible">
</div>
</div>
Note, this will make the .over div ignore ALL pointer events, so javascript click handlers won't work
I would adjust the HTML structure and detect the hover on .over
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.over:hover + .under {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
<div>
<div class="over" data-comment="I am invisible"></div>
<div class="under">Hello!</div>
</div>
Replace the order of the divs and set on hover to the over with ~ that targets the next sibling
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
.over:hover~div {
border: 10px solid green;
}
<div>
<div class="over" data-comment="I am invisible">
</div>
<div class="under">
Hello!
</div>
</div>
Related
I am trying to create something similar to a semi circle inside a rectangle something like this, the ellipse in the background.
expected design
I am able to implement the circle inside the rectangle but couldn't find a way to cut out the extra part of the ellipse, can someone please help me with achieving the required design?
achieved
.rectangle {
height: 110px;
width:200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
}
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
You want to hide the part of the circle that overflows the rectangle
You can do this by setting overflow: hidden; on the rectangle.
.rectangle {
height: 110px;
width: 200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle {
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
}
<div class="rectangle">
<div class="circle">
</div>
</div>
.rectangle{
height: 110px;
width:200px;
background-color: #313131;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle{
position: absolute;
right: 3px;
top: 1px;
width: 93%;
height: 95%;
border-radius: 50%;
background: #404040;
}
.circle-border{
border-radius: 50%;
position: relative;
right: -129px;
top: -6px;
width: 41%;
height: 70%;
border: 2px solid #404040;
}
<div class="rectangle">
<div class="circle-border">
<div class="circle">
</div>
</div>
</div>
I'm trying to create an icon like this :
Here is my code :
<head>
<style type="text/css">
.dot {
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
border: 10px solid red;
}
.square {
height: 353.55px;
width: 353.55px;
background-color: #6a6;
display: inline-block;
}
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
</style>
</head>
<body>
<div class="dot"></div>
<div class="square"></div>
<div class="triangle"></div>
</body>
But what I'm getting is this :
How can I make them overlap ?
tried z-index : 1 and 2 and 3, doesn't work
Try this:
maybe this is not exactly what you are looking for, but it might help.
<head>
<style type="text/css">
.wrapper {
position: relative;
height: 500px;
width: 500px;
transform: scale(0.25)
}
.dot {
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
border: 10px solid red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square {
height: 353.55px;
width: 353.55px;
background-color: #6a6;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.triangle {
width: 0;
height: 0;
border-left: 51px solid transparent;
border-right: 51px solid transparent;
border-bottom: 85px solid blue;
position: absolute;
left: 50%;
top: 16%;
transform-origin: center;
transform: translateX(-50%) scale(9);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="triangle"></div>
<div class="dot"></div>
<div class="square"></div>
</div>
</body>
I believe that you are looking for something like this:
.dot {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 332px;
width: 332px;
border-radius: 50%;
border: 10px solid red;
top: 148px;
left: 190px;
}
.square {
height: 235px;
width: 235px;
background-color: #6a6;
position: relative;
}
.square:after {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 0;
border-top: solid 110px white;
border-bottom: solid 110px white;
border-right: solid 110px white;
border-left: solid 110px white;
}
.triangle {
position: absolute;
height: 0;
width: 0;
display: flex;
justify-content: center;
align-items: center;
border-left: 358px solid transparent;
border-right: 358px solid transparent;
border-bottom: 500px solid blue;
z-index: -1;
}
.triangle::after {
content: '';
position: absolute;
top: 12px;
left: -340px;
width: 0;
border-bottom: solid 480px white;
border-right: solid 340px transparent;
border-left: solid 340px transparent;
}
<div class="triangle">
</div>
<div class="dot">
<div class="square"></div>
</div>
Use absolute positioning and reorder the divs. here is what I did, the sizes are wrong but they are overlapping:
<head>
<style type="text/css">
.dot {
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
border: 10px solid red;
position:absolute;
top: 140px;
left: 130px;
}
.square {
height: 353.55px;
width: 353.55px;
background-color: #6a6;
display: inline-block;
position:absolute;
top: 224px;
left: 214px;
}
.triangle {
width: 0;
height: 0;
border-left: 400px solid transparent;
border-right: 400px solid transparent;
border-bottom: 800px solid blue;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="triangle"></div>
<div class="dot"></div>
<div class="square"></div>
</body>
![Here is the result][1]
[1]: https://i.stack.imgur.com/85Ztd.png
Here is an example code that demonstrate the issue
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
<div>
<div class="under">
Hello!
</div>
<div class="over" data-comment="I am invisible">
</div>
</div>
When the mouse hovers over the over div, I want the under div to be aware of the hover event and, in this case, change the border accordingly.
However the over div is apparently intercepting the hover event. Can there be a pure css solution to pass the hover event to the under div?
Pointer events to the rescue!
Just set pointer-events: none; to the .over.
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
pointer-events: none;
}
<div>
<div class="under">
Hello!
</div>
<div class="over" data-comment="I am invisible">
</div>
</div>
Note, this will make the .over div ignore ALL pointer events, so javascript click handlers won't work
I would adjust the HTML structure and detect the hover on .over
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.over:hover + .under {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
<div>
<div class="over" data-comment="I am invisible"></div>
<div class="under">Hello!</div>
</div>
Replace the order of the divs and set on hover to the over with ~ that targets the next sibling
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
.over:hover~div {
border: 10px solid green;
}
<div>
<div class="over" data-comment="I am invisible">
</div>
<div class="under">
Hello!
</div>
</div>
Below is the image I am trying for; I managed to get a rectangle using CSS, but I am trying for a rectangle above another one .
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
}
<div ondragstart="dragStart(event)" draggable="true" id="dragtarget2">
<p>meter</p>
</div>
Make your rectangles position: absolute and the container as position: relative.
This is the code you're looking for.
.container{
position: relative;
}
.first , .second, .third {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 40px;
background-color: gray;
border-radius: 4px;
border: 2px solid red;
}
.second{
top: 4px;
left: 4px;
}
.third{
top: 8px;
left: 8px;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
Use position: absolute/position: relative to move element from it's origin position. Use z-index to move element above/below other elements (higher z-index - higher element is positioned).
.border {
border: 2px solid red;
background-color: #aaa;
width: 200px;
height: 50px;
line-height: 50px;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.border:nth-child(2) {
left: 5px;
top: 5px;
z-index: 6;
}
.border:nth-child(3) {
left: 10px;
top: 10px;
z-index: 7;
}
.wrapper {
margin: 10px;
/* NOTE: this does not effect absolute elements */
padding: 10px;
/* NOTE: this will be origin of absolute elements coordinates */
position: relative;
}
<div class="wrapper">
<div class="border">1</div>
<div class="border">2</div>
<div class="border origin">SmartMeter</div>
</div>
With less HTML:
.wrapper {
position: relative;
margin: 10px;
}
.border {
position: relative;
}
.border span,
.border:before,
.border:after {
content: '';
position: absolute;
left: 0;
top: 0;
border: 2px solid red;
background: #aaa;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
}
.border:after {
left: 5px;
top: 5px;
z-index: 6;
}
.border span {
left: 10px;
top: 10px;
z-index: 7;
}
<div class="wrapper">
<div class="border"><span>SmartMeter</span>
</div>
</div>
I have added two outer divs so that the code is as follows.
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
border: 2px solid;
padding: 2px;
}
.dragtarget0 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 2px;
margin: 2px;
}
.dragtarget1 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 3px;
}
<div class="dragtarget0">
<div class="dragtarget1">
<div id="dragtarget2">
<p>meter</p>
</div>
</div>
</div>
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}