Move div when hover on other div

Question

I created a nav which contains a list and currently when I hover on the last 3 list items, an image appears just below the list item(or tab). However, when each image appears it overlaps the bootstrap carousel just beneath the navbar. How do I make the bootstrap carousel move down so that it stays below the image when the image appears on hover of each tab?

#nav{
  height: 5vw;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background: gray;
    margin-top: 0;
}
#nav-ul li{
    display: block;
    list-style-type: none;
    background: white;
    border-radius: 10px;
    border: 2px solid blue;
    width: 16%;
    position: relative;
}
#nav-ul li:not(:first-child){
    margin-left: 2%;
}
#nav-ul li a {
color: black;
    text-decoration: none;
    font-size: 1.1vw;
}
#nav-ul{
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}
#nav-ul img{
display: block;
z-index: 1;
}
#li-1 img{
    margin-top: 2vw;
    position: absolute;
    height: 9vw;
    left: 0;
    width: 100%;
    display: none;
    cursor: pointer;
}
#li-1:hover #li-img-1{
    display: block;
    margin-top: 0;
}
#li-2 img{
    margin-top: 2vw;
    position: absolute;
    height: 9vw;
    left: 0;
    width: 100%;
    display: none;
    cursor: pointer;
}
#li-2:hover #li-img-2{
   display: block;
    margin-top: 0; 
}
#li-3 img{
  margin-top: 2vw;
    position: absolute;
    height: 9vw;
    left: 0;
    width: 100%;
    display: none;
    cursor: pointer;   
}
#li-3:hover #li-img-3{
   display: block;
    margin-top: 0; 
}
#myCarousel{
    width: 100%;
    margin: auto;
    background: blue;
    color: white;
    text-align: center;
    height: 3vw;
}

.carousel-inner div{
    display: flex;
    align-items: center;
    height: 3vw;
}
.carousel-inner div p{
    line-height: 3vw;
    font-size: 1.1vw;
}

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
              <meta name="viewport" width="device-width" initial-scale="1.0">
            <title>Money CV</title>
            <link href="moneycv.css" rel="stylesheet" type="text/css">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            </head>


<body>

<div id="nav">
              <ul id="nav-ul">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">-</a></li>
                    <li id="li-1"><a href="#">Employee's Portal</a>
                     <img src="https://www.image.ie/images/no-image.png" id="li-img-1"/>
                    </li>
                    <li id="li-2"><a href="#">Services</a>
                     <img src="https://www.image.ie/images/no-image.png" id="li-img-2"/>
                    </li>
                    <li id="li-3"><a href="#">Organising</a>
                     <img src="https://www.image.ie/images/no-image.png" id="li-img-3"/>
                    </li>
                    
                </ul>
            </div>
 <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item active">
    <p>Testimonial 1</p>
      </div>

      <div class="item">
        <p>Testimonial 2</p>
      </div>
    
      <div class="item">
         <p>Testimonial 3</p>
      </div>
    </div>
  </div>
  </body>
  </html>

score 1 · Accepted Answer · answered Nov 24 '18 at 02:12

I'm not totally sure but you can move other elements when you hover certain elements likeso:

.hover {
  background-color: blue;
  padding: 8px;
}

.move {
  background-color: red;
  padding: 8px;
  transition: 0.5s;
}

.hover:hover ~ .move {
  margin-top: 48px;
}

<div class="hover">Hover Me</div>
<div class="move">I move</div>

You could read more about css selectors here (Such as the ~ I used in the hover example). There are also many ways to move the item besides the margin-top such as top.

Move div when hover on other div

1 Answers1