Блог

Главная - Вопросы по программированию - Текст с верхним краем в виде% перемещения при наведении .наведите курсор, но не с верхним краем в виде пикселя

Текст с верхним краем в виде% перемещения при наведении .наведите курсор, но не с верхним краем в виде пикселя

#html #css #image #text #responsive

#HTML #css #изображение #текст #отзывчивый

Вопрос:

Я в своем последнем семестре собираюсь получить степень бакалавра в области разработки программного обеспечения. В настоящее время я ПОРАЖЕН этой проблемой веб-разработчиков.

Моя конечная цель — иметь отзывчивый img с наложением текста, который отвечает изображению. У меня есть отзывчивый img, и я установил его z-индекс на -2, но текст не работает. Когда я использую верхнее поле в качестве пикселя, текст остается там, где я хочу, но реагирует. Когда я меняю margin-top на% и навожу курсор на текст ITSP 136, DBMS110 переходит на новую позицию

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

html Ivy Tech 

 </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%;
}

спасибо за любую помощь,
«Мэтт в Северной Индиане»

Комментарии:

1. Кстати, вам было бы лучше переместить эти информационные всплывающие окна вперед (z-index) и вниз под ссылками.

Ответ №1:

Вам нужно, чтобы ваши всплывающие окна были абсолютно позиционированы.

 .hover-DBMS110,
.hover-ITSP136 {
  position: absolute;
}

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