个人中心
gpt4 book ai didi

html - Bootstrap中div叠加跳转到另一行

转载 作者：行者123 更新时间：2023-11-28 03:46:11 24 4
gpt4 key购买 nike

我有一组带有图像的 div，它将在我 future 的元素中充当导航。我在我的第一张图片上放了另一个不透明度为 0 的彩色 div。我希望它在用户悬停 div 时获得不透明度。我已将具有相同大小和位置的类添加到悬停的 div 作为其父级。我已将位置绝对设置为悬停的 div 和相对于父容器。

问题是:我的 div 出现在 div 的正下方，而不是在它上面，我能用它做什么？

我见过类似的元素(不是 Bootstrap 构建)有覆盖层但不使用 z-index，但在我的情况下我无法避免它，有什么办法吗？

我想在悬停容器顶部显示文本，正确的做法是什么 - p，包裹在 div 中并放入悬停 div？

<!DOCTYPE html>
<html lang="UA-ru">
    <head>
        <title> Portfolio</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet"  href="CSS/custom.css" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    </head>
    <body>
        <div id="rowfirst" class="container-fluid">
        <div class="row" id="allrow">

         <div id="elementUnique" class="col-lg-6 col-md-12 col-sm-12 col-xs-12"><img id="img1"; class="img-responsive" src="https://c1.staticflickr.com/4/3854/33471675672_df4a45ed78_b.jpg"><div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="elementUniquehover"></div></div>
            <div id="element1" class="col-lg-3 col-md-6 col-xs-12"><img id="img1"; class="img-responsive" src="https://c1.staticflickr.com/4/3856/15035927740_3c3fd4368d_h.jpg"></div>
            <div id="element2" class=" col-lg-3 col-md-6 col-xs-12"><img id="img2"; class="img-responsive" src="https://c1.staticflickr.com/4/3906/14398449382_5f1d47c281_b.jpg"></div>
            </div>
            <div class="row">
        <div id="element3" class="col-lg-3 col-md-6 col-xs-12"><img id="img3"; class="img-responsive" src="https://c1.staticflickr.com/6/5143/5679564578_8c765d819d_b.jpg"></div>
            <div id="element4" class=" col-lg-3 col-md-6 col-xs-12"><img id="img4"; class="img-responsive" src="https://c1.staticflickr.com/8/7385/9938594544_bd06f9b345_b.jpg"></div>
            <div id="element5" class=" col-lg-3 col-md-6 col-xs-12"><img id="img5"; class="img-responsive" src="https://c1.staticflickr.com/9/8594/15993347406_bb1bb4ef5e_b.jpg"></div>
                  <div id="element6" class=" col-lg-3 col-md-6 col-xs-12"><img id="img6"; class="img-responsive" src="https://c1.staticflickr.com/7/6109/6317119669_93f293eeee_b.jpg"></div>
            </div>


    <nav id="mynavigation" class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container-fluid">
            <div id="headernav" class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
             <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
                <a class="navbar-brand" href="#">Portfolio</a></div>
            <div class="collapse navbar-collapse" id="myNavbar">
            <div id="navbarul"><ul  class=" nav navbar-nav">
              <li id=webli><a id="navbar">Web</a></li>
                 <li id="videoli"><a id="navbar">Video</a></li>
                 <li id="photoli"><a id="navbar">Photo</a></li>
            </ul>
                </div></div></div></nav>

        </div>
    </body>
</html>

#navbarul{
    width: 20%;
    margin: auto;
    display: block;
   }

@media only screen and (max-width : 768px){
   #webli {
        display:inline;
      margin: 0;
       font-size: 7px;
       padding: 0;
       line-height: 0;
    }
}

@media only screen and (max-width : 768px){
   #videoli {
        display:inline;
       margin: 0;
      font-size: 7px;
       padding: 0;
        line-height: 0;

    }
}

@media only screen and (max-width : 768px){
   #photoli  {
        display:inline;
        margin: 0;
       font-size: 7px;
       padding: 0;
        line-height: 0;

    }
}

@media only screen and (max-width : 768px){
   #photoli  {
        display:inline;
        margin: 0;
       font-size: 7px;
       padding: 0;
        line-height: 0;
        line-height: 0;

    }
}

#navbar{
    display: block;
    font-family: "Abel", sans sans-serif;
   text-transform: uppercase;
    font-size: 2em;
    cursor: pointer; 
 display: inline-block;
    text-align: center;


}

#element1{
    display: block;

  height: 460px;
    padding: 0;
     margin: 0;
}

#element4{
    display: block;

  height:456px;
    padding: 0;
     margin: 0;
}



#img4{
height:100%;

    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
  }

#element4:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;

}

#element5{
    display: block;

  height:456px;
    padding: 0;
     margin: 0;
}

#img5{
height:100%;

    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
  }

#element5:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;

}

#element6{
    display: block;

  height:456px;
    padding: 0;
     margin: 0;
}

#img6{
height:100%;

    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
  }

#element6:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;

}

#element3{
    display: block;

  height:456px;
    padding: 0;
     margin: 0;
}

#img3{
height:100%;

    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
  }


#element3:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;
    }

#element2{
    display: block;

  height:460px;
    padding: 0;
     margin: 0;
}

#img2{
height:100%;

    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
  }

#element2:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;

}

#elementUnique{
    display: inline-block;
    position: relative;

    height: 460px;
    padding: 0;
     margin: 0;


   }
#elementUniquehover{
    display: inline-block;
    position: absolute;
    height: 460px;
    padding: 0;
     margin: 0;
     opacity: 0;
    background-color: aqua;
    transition: .5s ease;

   }

#elementUnique:hover #elementUniquehover {
    opacity: 1;
    z-index: 20;
}


#element1:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;

}
#elementUnique:hover{
     outline: solid rgb(255, 255, 77) 5px;
      outline-offset: -5px;
}

#img1{
height:100%;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
    transition: .5s ease;

  }



#mynavigation{
  height:6% ;
}
  @media only screen and (max-width : 768px) { #mynavigation{
  height:15% ;
}
}
}
#rowfirst{
    width: 100%;
    height: 100%;
    margin: 0;


}

   html {
    height: 100%;

}

body {
    height: 100%;

}

#allrow{
    position: relative;
}




.infotext{
    font-family: 
}

最佳答案

悬停div的设置顶部:0；左:0；

有帮助。尽管如此，它只覆盖了图像的一半

关于html - Bootstrap中div叠加跳转到另一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43963262/

24 4 0
文章推荐： html - 如何在此 Bootstrap 代码片段中添加 Logo 图像
文章推荐： c++ - 运行时错误 -(图片)
文章推荐： c++ - mem_func 和 for_each 用法
文章推荐： javascript - AngularJS 数据与作用域函数的绑定(bind)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com