In the below examples I have 2 div's, What I'm trying to figure out is how to make .two green when .one is .active. Is it possible? jsFiddle
div {
position: relative;
height: 100px;
width: 300px;
}
.one {
background: red;
}
.two {
background: blue;
}
.one.active ~ .two {
background: green;
}
<directive-one>
<div class="one active">
First block
</div>
</directive-one>
<directive-two>
<div class="two">
Second block
</div>
</directive-two>
You can do this be referencing the directives specifically in css
div {
position: relative;
height: 100px;
width: 300px;
}
.one {
background: red;
}
.two {
background: blue;
}
directive-one:active ~ directive-two > .two {
background-color: green;
}
<directive-one>
<div class="one active">
First block
</div>
</directive-one>
<directive-two>
<div class="two">
Second block
</div>
</directive-two>
You can also just remove the directives so the divs can be accessed
div {
position: relative;
height: 100px;
width: 300px;
}
.one {
background: red;
}
.two {
background: blue;
}
.one:active ~ .two {
background-color: green;
}
<div class="one active">
First block
</div>
<div class="two">
Second block
</div>
Otherwise, I dont believe its possible to access a div that isnt a sibling or child, which is the case with the <div> inside the <directive-one> trying to access another <div> inside another <directive-two>
If you mark the directive-one with active, then it is possible to do with this css:
directive-one.active ~ directive-two > .two {
background: green;
}
I don't think it is possible to dig into the 'preceding' element though, but not totally sure.
Related
This question already has answers here:
Is it possible to cancel parent hover style when a child element is hovered?
(2 answers)
Closed 5 months ago.
The problem is, when I hover my yellow box, the hover effect is running. How to avoid this effect when I am hover stricte yellow box.
.p {
width: 200px;
height: 200px;
background: red;
}
.c {
width: 100px;
height: 100px;
background: yellow;
}
.p:hover {
background: blue;
}
<div class="p">
<div class="c"></div>
</div>
A solution w/o JS:
.wrapper {position: relative}
.p {
position: absolute;
top:0;
left:0;
width: 200px;
height: 200px;
background:red;
}
.c {
position: absolute;
top:0;
left:0;
width: 100px;
height: 100px;
background: yellow;
}
.p:hover {
background: blue;
}
}
<div class="wrapper">
<div class="p"></div>
<div class="c"></div>
</div>
Turns out this is possible with CSS. However, you can also try to accomplish this with a JQuery hover effect..
$(function() {
$('.p').on('mouseover', function(e) {
if (e.target === this) {
$('.p').css('background', 'blue');
}
})
.on('mouseout', function() {
$('.p').css('background', 'red');
});
});
.p {
width: 200px;
height: 200px;
background:red;
}
.c {
width: 100px;
height: 100px;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p">
<div class="c"></div>
</div>
I have really simple solution for this.
just create a new class
.noHover{ pointer-events: none; }
and use this to disable any event on it. use it like:
<a href='' class='btn noHover'>You cant touch ME :P</a>
i going to create a progress bar, just like the picture below(ues red and green for sharp contrast).
progress bar
my codes is as follows
// react
class App extends React.Component {
render () {
return (
<div className='home-page-wrapper'>
<ProgressBar />
</div>
);
}
}
// css
.outter {
width: 260px;
height: 46px;
border-radius: 22px;
background: green;
overflow: hidden;
.inner {
width: 100%;
height: 100%;
background: red;
transform: translateX(100px);
}
}
the problem is that the red div can not full cover the green one, it looks like that the red div has a green border, how can i do?
Please try this:
.progress-bar {
width:90%;
height:30px;
overflow:hidden;
background:green;
border-radius:6px;
}
.bar {
float:left;
height:100%;
background:red;
}
<div class="progress-bar">
<div class="bar" style="width:45%">
</div>
</div>
You may use this code:
.outter {
width: 260px;
height: 46px;
border-radius: 22px;
background: green;
overflow: hidden;
}
.outter .inner {
height: 100%;
background: red;
border-radius: 22px;
}
<div class="outter">
<div class="inner" style="width: 70%;"></div>
</div>
change the .inner width property to perform the progression.
I know what absolute positioning in CSS is & how it is used, so I thought of playing with it. I created 3 divs mainly and set the position of the .red one as absolute and to my surprise, the .blue one goes missing. Why is that? Shouldn't the .red one be out of the flow and its position should have been altered rather than the .blue ones?
.red{
background-color: red;
height: 30px;
width: 30px;
position: absolute;
}
.blue{
background-color: blue;
height: 30px;
width: 30px;
}
.green{
background-color: green;
height: 30px;
width: 30px;
}
<div class="parent">
<div class="red">
</div>
<div class="blue">
</div>
<div class="green">
</div>
</div>
This is happening because of out of flow. As you can see in the snippet below, in the first .parent element, .red is visible, whereas .blue is not. The .blue element is present and is hidden behind .red. In the second .parent, the .red element has one more class .change changing the z-index property to -1. This makes the .red hide behind .blue..
.parent {
position: relative;
}
.red {
background-color: red;
height: 30px;
width: 30px;
position: absolute;
}
.blue {
background-color: blue;
height: 30px;
width: 30px;
}
.green {
background-color: green;
height: 30px;
width: 30px;
}
.change {
z-index: -1;
}
<div class="parent">
<div class="red">
</div>
<div class="blue">
</div>
<div class="green">
</div>
</div>
<br/><br/>
<div class="parent">
<div class="red change">
</div>
<div class="blue">
</div>
<div class="green">
</div>
</div>
Your .red div is above your .blue. For testing, add opacity: 0 to the red one and you will notice that it is still there.
This is because the .red has position: absolute while the blue and green one have position: relative. So they do not affect each other in their positons.
A relative element is positioned relative in its parent.
A absolute element is positioned absolute in its parent, where the top left corner is the origin. relative and absolute elements do not affect each other in their positions.
With pure HTML and CSS it is possible to show and hide content with an anchor tag:
#red { background: red; }
#blue { background: blue; }
#green { background: green; }
.box {
width: 200px;
height: 200px;
display: none;
}
.box:target {
display: block;
}
Red item | Blue item | Green item
<div class="box" id="red"></div>
<div class="box" id="blue"></div>
<div class="box" id="green"></div>
But how can I display the first (red) item on page load?
If you're ok with modifying the html, and putting the red box last then you can do something like:
#red {
background: red;
display: block;
}
#blue { background: blue; }
#green { background: green; }
.box {
width: 200px;
height: 200px;
display: none;
}
.box:target {
display: block;
}
.box:target ~ #red {
display: none;
}
The solution is somehow easy but I cannot show it here. If you are using this code within a page you simply need to append the anchor of the the first a tag to the url to activate its target. So you need to simply do something like this:
wwww.page.html#red
Here is a screenshot of the result:
This will work without modifying the code and you can choose which one to make visible at the start.
You can try this:
#red { background: red; display:block;}
#blue { background: blue; }
#green { background: green; }
.box {
width: 100%;
height: 100%;
display: none;
position: absolute;
top: 0;
left: 0;
}
.box:target {
display: block;
}
.wrapper {
position: relative;
width: 200px;
height: 200px;
}
Red item | Blue item | Green item
<div class="wrapper">
<div class="box" id="red"></div>
<div class="box" id="blue"></div>
<div class="box" id="green"></div>
</div>
Solution(s) :-
<style>
#red {
background: red;
}
#blue {
background: blue;
}
#green {
background: green;
}
.box {
display: none;
}
.box:target {
display: block;
}
</style>
Red item |
Blue item |
Green item
<div class="box" id="red">Red</div>
<div class="box" id="blue">Blue</div>
<div class="box" id="green">Green</div>
Explanation(s) :-
I Finally found a solution for your answer but ...
for it to work properly , you need to add a background color ....
finally , I hope that it is what you wanted .....
Notes And References :-
currently , i have no references for above codes ,
but ,
NOTE : Please Add Background color fr it to work properly
How do I position 2 divs that overlap plus a third div just to the right of those overlapping divs (but the third not floated all the way right)?
<div id=one>I overlap id=two.</div>
<div id=two>I overlap id=one.</div>
<div id=three>I am just to the right of one and two.</div>
The desired layout is:
| one-overlaps-two | three |
http://i.imgur.com/4CMNaUh.png
I know I can overlap the first 2 divs using a wrapper div that's position:relative and setting divs one & two to position:absolute
<div id="wrapper">
<div id=one>I overlap id=two.</div>
<div id=two>I overlap id=one.</div>
</div>
#wrapper{position:relative;}
#one,#two{position:absolute;}
But how can I get div id=three just to the right of overlapping divs one & two?
What I've got so far: http://jsfiddle.net/justAsking/cXrBA/
A solution can be as follows:
http://jsfiddle.net/cXrBA/2/
HTML
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
.wrapper {
padding-left: 100px;
width: 100px;
height: 100px;
position: relative;
}
.one , .two {
width: 100px;
position: absolute;
left: 0;
}
.one {
background-color: blue;
height: 50px;
top: 0;
z-index: 1;
}
.two {
background-color: red;
height: 100px;
top: 0;
}
.three {
background-color: green;
width: 100px;
height: 100px;
}
Give the second div a negative margin-left;
http://jsfiddle.net/HXH76/
div {
display: inline-block;
}
#one {
background: hsla(0,100%, 50%, 0.50);
}
#two {
background: hsla(90,100%, 50%, 0.50);
margin-left: -40px;
}
#three {
background: hsla(180,100%, 50%, 0.50);
}