CODEWITHSUNDEEP
htmlcss
billy23lones
billy23lones

Reputation: 25

Make one div move when different div selected

I've got two divs, underneath each other.

When someone hovers over div1, I want it to make it move to the left, as well as make div2 underneath it move to the right.. I've had an attempt at this, but can't seem to complete it..

Here's my code:

    <div id="mainbox">
    <p>bla bla bla text</p>
    </div>
    <br />
    <footer id="mainbox" style="height: 77px;">
    <div id="mainbox2">
        <p>bla text text</p>
    </div>
    </footer>

#mainbox {
 transition: .4s;
 -moz-transition: .4s;
 -webkit-transition: .4s;
 -ms-transition: .4s;
 background: red;
 border-radius: 40px;
}

#mainbox:hover {
 transition: .4s;
 -moz-transition: .4s;
 -webkit-transition: .4s;
 -ms-transition: .4s;
 margin-left: -5%;
}

#mainbox:hover ~ #mainbox2 {
 margin-left: -5%;
}

Here's a JSFIDDLE: https://jsfiddle.net/payw97w0/1/

Upvotes: 1

Views: 34

Answers (1)

divy3993
divy3993

Reputation: 5810

First things first you should never have same id names.

Here i have just edited the id names/values, you can change as per your requirement.

#mainbox,
#mainbox1 {
  transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s;
  -ms-transition: .4s;
  background: red;
  border-radius: 40px;
}
#mainbox1 {
  position: relative;
  right: 0px;
}
#mainbox {
  position: relative;
  left: 0px;
}
#mainbox1:hover {
  transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s;
  -ms-transition: .4s;
  right: 5%;
}
#mainbox1:hover ~ #mainbox {
  transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s;
  -ms-transition: .4s;
  left: 20px;
}
<div id="mainbox1">
  <p>bla bla bla text</p>
</div>
<br />
<footer id="mainbox" style="height: 77px;">
  <div id="mainbox2">
    <p>bla text text</p>
  </div>
</footer>

Fiddle : DEMO

Upvotes: 1

Related Questions