Question

我在上一学期参加软件开发的AAS。我目前正在通过这个网络开发问题进行BOGGLED。

我的最终目标是拥有一个带有文本叠加层的响应式img，可以对图像做出响应。我有img响应，我把它的z-index设置为-2，但文本正在起作用。当我使用margin-top作为px时，文本保持在我想要的位置但响应迅速。当我将margin-top更改为％并将鼠标悬停在ITSP 136文本上时，DBMS110会跳转到新位置

https://jsfiddle.net/1euxhL41/1/

HTML 常春藤科技

</head>

<body>

<!-- text over image w/ Bootstrap -->
<div class="container">

<img id="image" src="road2.png" class="img-responsive img-center" />

<!-- red titles -->
<div id="red-program" style="color: red">
Program
</div>

<div id="red-semester" style="color: red">
Semesters
</div>

<div id="red-courses" style="color: red">
Courses
</div>

 <div id="red-certs" style="color: red">
Certificates
</div>

<div id="red-jobs" style="color: red">
Jobs Outlooks
</div>
<!-- end red titles -->

<!-- start blue -->




<!-- helpdesk courses -->


   <div id="blue-ITSP136" style="color: blue"><a       href="https://wwwapps.ivytech.edu/cor3/i/6/0/mDCTODTLlWZO2hySBKcpgzAr03nJfI0kiWM         43cOeuTf2Q6R4smCKrvPVsJpAJlXP">
    ITSP 136
     </a></div>
    <div class="hover-ITSP136"><strong><u>PREREQUISITES:</u></strong>    <br>ITSP    135 Hardware/Software Support <br><br>
       <strong><u>COREREQUISITES:</u></strong><br>ITSP 135 Hardware/Software      Support </div>

 <div id="blue-DBMS110" style="color: blue"><a     href="https://wwwapps.ivytech.edu/cor3/v/5/8/ShvDHWoZZhDiRBwfRU3ymfLRDKEfG9g8yvZ      Z7Hf4Kwh5z05RpJp0uPwamcMtDa4w">
DBMS 110
 </a></div>
  <div class="hover-DBMS110"><strong><u>PREREQUISITES:</u></strong><br>INFM       109 Informatics Fundamentals <br><br>
    <strong><u>COREREQUISITES:</u></strong><br>INFM 109 Informatics      Fundamentals </div>




 <!-- end helpdesk courses-->
 <!-- end blue-->

 <!-- Start purple -->


 <!-- start purple courses -->

 <!-- end purple courses -->

 <!-- end purple  -->


 <!-- end container -->
 </div>



 </body>
 </html>

CSS

    html, body {
         margin: 0;
         padding: 0;
         width:100%;
      }


      .info {
           padding: 20px;
           font-size: 75%;
        }


      .footer{
         position: absolute;
         bottom:0px;
         height: 5%;
         width:100%;

        }



       iframe {
           margin-top: 20px;
     }

       .container {
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}


#blue-DBMS110 a:link{
  z-index: 0;
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  margin: 13% 0 0 46%;

}

.hover-DBMS110{
    background:rgba(0,0,0,0.5);
    padding: 20px;
    display: none;
    z-index: 0;

}

#blue-DBMS110:hover + .hover-DBMS110 {
    display: block;
    width: 200px;
    color: white;
    z-index: 0;
    margin-left: 28%;
    margin-top: 13%;
}

#blue-ITSP136 a:link{
  z-index: 0;
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  margin: 14% 0 0 46%;

}

.hover-ITSP136{
    background:rgba(0,0,0,0.5);
    padding: 20px;
    display: none;
    z-index: 0;

}

#blue-ITSP136:hover + .hover-ITSP136 {
    display: block;
    width: 200px;
    color: white;
    z-index: 0;
    margin-left: 28%;
    margin-top: 13%;
}





#red-program {
  z-index: -1;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  left: 3.5%;
  margin-top: 11%;
}

#red-semester {
  z-index: -1;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  left: 13%;
  margin-top: 11%;
}

#red-courses {
  z-index: -1;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  left: 42%;
  margin-top: 7%;
}

#red-certs {
  z-index: -1;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  left: 57%;
  margin-top: 7%;
}

#red-jobs {
  z-index: -1;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  left: 77%;
  margin-top: 7%;
}

感谢您的帮助， “印第安纳州北部的马特”

Answer 1

你需要弹出窗口绝对定位。

sqoop import -D mapred.job.queue.name=$queuename -D mapred.job.name=$table_SQOOP_INITIAL_LOAD -D java.security.egd=file:/dev/../dev/urandom -D mapred.child.java.opts=" -Djava.security.egd=file:/dev/../dev/urandom" --driver com.teradata.jdbc.TeraDriver --connect jdbc:teradata://${sqoopSourceServer}/DATABASE=${sqoopSchema} --username ${sqoopUsername} --password ${sqoopPassword} --hive-import --hive-overwrite --hive-drop-import-delims --null-string '\\N' --null-non-string '\\N' --table  "$table" --num-mappers 50  --split-by column --target-dir ${hdfsTargetDirectory}$table  --hive-table ${hive_database}.$table

https://jsfiddle.net/tikosar/bvw71q5e/

带有margin-top的文本作为％移动时的.hover，但不是margin-top作为px

1 个答案: