0
私は前回の学期に、ソフトウェア開発のAASに行きました。私は現在、このWeb開発の問題によってうんざりしています。余白があるときのマージントップのテキスト.hoverですが、余白はありません.pxx
私の最終目標は、イメージで応答するテキストオーバーレイを使用して応答性のあるimgを作成することです。 私はimgを反応させました。私はz-indexを-2に設定しましたが、テキストが動いています。 私がmargin-topをpxとして使用すると、テキストは元の位置にとどまりますが、応答性があります。 私は％のマージントップを変更し、新しい位置に
https://jsfiddle.net/1euxhL41/1/
HTML アイビーテック
をDBMS110がジャンプITSP 136テキストを上にマウスを移動するとき</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%;
}
おかげで、 '北部インディアナ州のマット・'
ところで、あなたは、ダウンリンクの下にフロント（Zインデックス）にそれらの情報のポップアップを移動したほうが良いと思います。 – Tigran