This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
I have 2 divs, i want to hover the first one to affect both of them, i found out on the forum how to affect the second by hovering the first one, but not both of them.
There is my code:
.red{
height: 150px;
width: 150px;
background-color: red;
float:left;
margin-right: 20px;
}
.blue{
height: 150px;
width: 150px;
background-color: blue;
float:left;
}
.red:hover ~ .blue{
transition: all .2s ease-in-out;
transform: scale(1.1);
}
<html>
<head>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
Thanks for helping me.
you can add red:hover selector to last style declaration
ie you do to hovered red div what you are doing to blue div
.red{
height: 150px;
width: 150px;
background-color: red;
float:left;
margin-right: 20px;
}
.blue{
height: 150px;
width: 150px;
background-color: blue;
float:left;
}
/* added one more selector here */
.red:hover,
.red:hover ~ .blue{
transition: all .2s ease-in-out;
transform: scale(1.1);
}
<html>
<head>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
to apply a rule to more than one selector use a comma between selectors
.red:hover ~ .blue, .red:hover {
transition: all .2s ease-in-out;
transform: scale(1.1);
}
You can always give the same class to the divs that you want to affect.
<html>
<head>
</head>
<body>
<div class="red affect"></div>
<div class="blue affect"></div>
</body>
</html>
.affect {
width: 150px;
height: 150px;
float:left;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.affect:hover {
transition: all .2s ease-in-out;
transform: scale( 1.2 );
}
Related
I am very new to coding so I am sorry if this is a simple question. I am trying to fade out the background while fading in the text using hover states.
This code works, however, I cannot seem to figure out why the hover state extends past the red square. I would like the hover state to only work when you mouse over the red square.
.relative{
position: relative;
}
.background {
background-color: red;
height: 100px;
width: 100px;
}
.text {
position: absolute;
top:0;
}
.relative .text{
transition: 1s;
color: transparent;
}
.relative:hover .text{
color: lightseagreen;
}
.relative:hover .background{
background: black;
transition: 1s;
}
<body>
<div class="relative">
<div class="background"></div>
<div class="text">Hello</div>
</div>
</body>
I think the reason is that the relative class is not the same size as the background, to fix this, add
height: 100px;
width: 100px;
to the relative as well.
Full code below
<DOCTYPE! html>
<html>
<head>
<style>
.relative{
position: relative;
height: 100px;
width: 100px;
}
.background {
background-color: red;
height: 100px;
width: 100px;
}
.text {
position: absolute;
top:0;
}
.relative .text{
transition: 1s;
color: transparent;
}
.relative:hover .text{
color: lightseagreen;
}
.relative:hover .background{
background: black;
transition: 1s;
}
</style>
</head>
<body>
<div class="relative">
<div class="background"></div>
<div class="text">Hello</div>
</div>
</body>
</html>
I have a simple div that goes down when hovered over. As the line goes down I want all the part of the page above the line to be colored with any color but I can't figure out how.
It can be only with HTML & CSS.
.a1:hover {
transform: translateY(96vh);
}
.a1 {
top: 20px;
height: 20px;
position: relative;
transition: all 4s;
background-color: #0000ff;
}
<div class="a1"></div>
you have to increase the height instead of translate transform...
change your css to this:
.a1:hover {
height: 96vh;
}
.a1 {
top: 20px;
height: 20px;
position: relative;
transition: all 2s ease-in;
background-color: #0000ff;
}
codepen example
This is a way to do it (written by following this answer)
.a1:hover{
transform: translateY(96vh);
}
.a1{
top:20px;
height: 20px;
position : relative;
transition: all 4s;
background-color:#0000ff;
}
.a2{
width:100%;
height:0vh;
transition: height 4s;
}
.a1:hover + .a2{
background-color:#000;
height:96vh;
}
.a2:hover{
background-color:#000;
height:0vh;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Lab2.css">
<title>Lab2b</title>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
</body>
</html>
Please refer to this jsfiddle: https://jsfiddle.net/b53te5qb/1/
I am attempting to make each of these div widths transition nicely over the other.
Right now it is an instant effect, but I would like for it to transition smoothly. When I attempt the transition it starts to get buggy.
Here is the HTML:
<div class="outer">
<div class="color left"></div>
<div class="color right"></div>
</div>
And here is the CSS so far:
.outer {
position: relative;
height: 100px;
width: 200px;
}
.color {
height: 50px;
width: 50%;
float: left;
transition: width 0.3s linear;
-webkit-transition: width 0.3s linear;
}
.color:hover {
width: 100%;
position: absolute;
}
.left {
background-color: #ff0;
}
.right {
background-color: #0ff;
}
I am open to restructuring this however I would need to in order to complete the task. I just provided this as a base example.
If you're just doing this with solid colors, I would transition transform: scaleX(). Using transition with transform will give you better performance.
.outer {
position: relative;
height: 100px;
width: 200px;
}
.color {
height: 50px;
width: 50%;
float: left;
transition: transform 0.3s linear;
-webkit-transition: transform 0.3s linear;
transform-origin: 0 0;
}
.color:hover {
transform: scaleX(2);
}
.left {
background-color: #ff0;
}
.right {
background-color: #0ff;
transform-origin: 100% 0;
}
<div class="outer">
<div class="color left"></div>
<div class="color right"></div>
</div>
Here you go: https://jsfiddle.net/prowseed/b53te5qb/10/
Two techniques, one with flexbox and one with position absolute, pick any :)
.outer {
position: relative;
height: 100px;
width: 666px;
display:flex;
}
.color {
flex: 1;
height: 100%;
transition: .3s;
}
.color:hover {
flex-basis:100%;
}
.outer2 {
margin-top:100px;
position: relative;
height: 100px;
width: 666px;
}
.outer2:hover .color {
width:0;
}
.outer2 .color {
position:absolute;
top:0;
left:0;
bottom:0;
width:50%;
}
.outer2 .color + .color {
left:auto;
right:0;
}
.outer2 .color:hover {
width:100%;
z-index:2;
}
You'll need to position them absolutely in order to avoid them from moving.
https://jsfiddle.net/b53te5qb/6/
I would highly recommend not transitioning the width, much better would be to transition transform: translateX(), since it will be hardware accelerated and much smoother: https://jsfiddle.net/b53te5qb/8/.
It still needs polishing, but the idea is there. (note the overflow: hidden to avoid showing the excess.) Another improvement would be to have two elements on top (50%/50% width) that trigger the hover via javascript, since when the elements move it's difficult to keep the hover on them, or to remove the hover without leaving the .outer component.
Hope it helps.
I want to apply transition to more than one div class.
I want to make an animated show so, I need to animate a lot of divs.
I have tried all possible sources on internet.
Here is my coding:
<html>
<head>
<style>
.line1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width:400px;
}
</style>
</head>
<body>
<div class ="line1"></div>
</html>
Try like this: Demo
.line1 div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
margin:10px;
}
.line1 div:hover {
width:400px;
}
There is no problem to just create many divs with the same class.
<style>
.line1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div :hover {
width:400px;
}
</style>
</head>
<body>
<div class="line1">
<div class="line1">
<div class="line1">
Or create multiple classes for different transitions:
.line1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
.line2 {
width: 100px;
height: 100px;
background: black;
transition: width 2s;
}
.line3 {
width: 100px;
height: 100px;
background: green;
transition: width 2s;
}
div :hover {
width:400px;
}
</style>
</head>
<body>
<div class="line1">
<div class="line2">
<div class="line3">
Check out this on codepen http://codepen.io/antoniskamamis/pen/hjBrE
It is a great example of using css only to do transitions between a serious of divs.
HTML
<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
CSS
body{background:#000;}
.container{
margin:50px auto;
width:500px;
height:300px;
overflow:hidden;
border:10px solid;
border-top-color:#856036;
border-left-color:#5d4426;
border-bottom-color:#856036;
border-right-color:#5d4426;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
You need to define a Transition Class and a transition Hover class in CSS
In given code Make Div tag (which you want to trns) member of Trans class <div Class="Trans">
Here is code
<html>
<head>
<style type="text/css">
.Trans
{
margin:20px;
width: 100px;
height: 100px;
transition: width 2s;
background: gray;
}
.normal
{
margin:20px;
width: 100px;
height: 100px;
background: gray;
}
Div.Trans:hover
{
background: green;
width:400px;
}
</style>
</head>
<body>
<div Class="Trans">Div Trans</div>
<div class="normal" >Div_Normal</div>
<div Class="Trans">Div Trans</div>
<div class="normal" Div_Normal>Div_Normal</div>
</body>
</html>
Style
.Trans //Style You need to apply on transition
transition: width 2s;//Transition Statement Must be included in .Trans Class
.normal //Normal Div you don't need if you dont want to apply any style
.Div.Trans: Hover //Olly apply hover of a Div Which Having class of Trans
You can check it in given code snippest
.Trans {
margin: 20px;
width: 100px;
height: 100px;
transition: width 2s;
background: red;
}
.normal {
margin: 20px;
width: 100px;
height: 100px;
background: gray;
}
Div.Trans:hover {
background: green;
width: 400px;
}
<body>
<div Class="Trans">Div_Trans</div>
<div class="normal">Div_Normal</div>
<div Class="Trans">Div_Trans</div>
<div class="normal">Div_Normal</div>
</body>
Instead of adding transitions to each class, add them all together in a comma separated list
.line1, .line2, .line3 {
transition: 1s width ease;
}
I have tried with these code. This is HTML code.
<div id="body">
<div id="back_1"></div>
<div id="back_2"></div>
</div>
Now I need to transform back_1 and back_2 divs max width of body div. I use like this. transform:translate(100%), but it is not working. It doesn't transform max width of body div. How can I transform (move whole child dives) that divs ?
I have created 2 DIVs for better understanding.
HTML
<div id="body">
<p>DEMO 1 (Flexible width)</p>
<div id="back_1"></div>
<div id="back_2"></div>
</div>
<div id="body1">
<p>DEMO 2 (fixed width of parent DIV)</p>
<div id="back_11"></div>
<div id="back_21"></div>
</div>
CSS
body{ color: #fff; }
#body {
width: auto;
background: red;
height: auto;
padding: 10px;
}
#back_1, #back_2 {
background: yellow;
width: inherit;
height: 50px;
border: 5px solid #fff;
}
#body1 {
width: 300px;
background: green;
height: auto;
padding: 10px;
margin-top: 10px;
}
#back_11{ margin-bottom: 10px; }
#back_11, #back_21 {
background: grey;
width: inherit;
height: 50px;
}
DEMO: SEE IN ACTION
DEMO1: Added On Hover for #body DIV's first DIV.
As per the clarification from you, it seems that you are trying to move the child divs within the parent upto the edge of the parent.
You started right with the transform: translate(100%).
One problem is that you have to specify which axis you want it to transalte. x-axis in your case and hence it should be translateX.
The other problem is that the 100% in translate is different from the usual percent units in CSS. The CSS percent units are dependent on the parent unit i.e. x% of parent's width/height etc. Whereas, the translate(100%) means 100% of the very element which is being translated.
So, in your case you have to carefully determine the parent width (the .body div) which should be in multiples of child's width. e.g. if parent is 100%, and child is 50%, then translate(100%) will translate the child by another 50% and hence reach the edge of the parent.
This will be more clear by this demo:
Demo: http://jsfiddle.net/abhitalks/Ze9cu/1/
Relevant CSS:
#body {
width: 100%;
height: 200px;
}
#back_2 {
width: 25%;
}
#back_2:hover {
-webkit-transform: translateX(300%);
}
Here, the child is 25% of its parent. So translateX(100%) will move it along the x-axis by only 25%. Making it translateX(300%) will make it move 3 times its own width.
You can use this to get you started as an example:
<style>
#body
{
background: gray;
width: 400px;
}
#back_1, #back_2
{
background: red;
position: relative;
width: 200px;
-moz-transition: .5s;
-webkit-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
cursor: pointer;
}
#back_1:hover, #back_2:hover
{
width: 100%;
}
</style>
<div id="body">
<div id="back_1">Back1</div>
<div id="back_2">Back2</div>
</div>
EDIT::: Using jQuery and jQueryUI
<style>
#body
{
position: relative;
width: 200px;
background: gray;
height: 100px;
max-width: 400px;
}
#back_1
{
position: absolute;
width: 100px;
background: red;
height: 10px;
left: 0px;
}
</style>
<script src="jquery.js"></script> <!-- Your jQuery reference -->
<script src="jqueryUI.js"></script> <!-- Your jQuery UI reference -->
<script>
$(document).ready(function() {
$("#body").mouseover(function() {
var maxWidth = $("#body").css("max-width");
$("#back_1").animate({ left: maxWidth });
});
$("#body").mouseleave(function() {
$("#back_1").animate({ left: 0 });
});
});
</script>
<div id="body">
<div id="back_1"></div>
<div id="back_2"></div>
</div>
Your view study this address
http://www.w3schools.com/cssref/css3_pr_transform.asp
example
<style>
#body{
border:1px solid red;
height:500px;
}
#body div{
background-color: blue;
width: 500px;
height: 40px;
/*General*/
transform:translate(200px, 0px);
/*Firefox*/
-moz-transform:translate(200px, 0px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px, 0px);
/*Chrome, Safari*/
-webkit-transform:translate(200px, 0px);
/*Opera*/
-o-transform:translate(200px, 0px);
border:1px soldi red;
transition:all 0.5s linear;
float:left;
margin:5px;
padding:10px;
}
#body:hover div{
/*General*/
transform:translate(100px, 50px);
/*Firefox*/
-moz-transform:translate(100px, 50px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(100px, 50px);
/*Chrome, Safari*/
-webkit-transform:translate(100px, 50px);
/*Opera*/
-o-transform:translate(100px, 50px);
transition:all 0.5s linear;
margin:80px;
padding:80px;
}
</style>
<body>
<div id="body" >
<div id="back1"></div>
<div id="back2"></div>
</div>
</body>