Question

我创建了一个包含列表的导航，当前，当我将鼠标悬停在最后3个列表项上时，图像就出现在列表项（或选项卡）的正下方。但是，当每个图像出现时，它会与导航栏正下方的引导轮播重叠。当图像出现在每个选项卡的悬停位置时，如何使引导传送带向下移动，使其保持在图像下方？

#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>

Answer 1

我不确定，但是当您像这样悬停某些元素时，您可以移动其他元素：

.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>

您可以阅读有关css选择器here的更多信息（例如我在悬停示例中使用的~）。除了margin-top以外，还有很多移动项目的方法，例如top。

将鼠标悬停在其他div上时移动div

1 个答案: