2
JSFIDDLE看起來並不漂亮，但是佔位符代替必要.. 其中仍然存在的問題是.cambria_project_popup和.hyatt_poject_popup無法在鼠標後顯示。
END編輯 希望這是一個我忽略的簡單問題，我在這裏面臨兩個不同的錯誤。
第一次開始工作，然後停止，我似乎無法弄清楚這是怎麼回事。
其次，在容器內的不同位置（底部，右側）使用相同的jquery函數進行定位時出現問題。
的問題是大膽..
請參考搗鼓更新的代碼
這裏是我的代碼。關注第一個問題的div是.headerbottom容器內：
<div class="wtff"></div>
<div class="wall_solutions_popup"></div>
<div class="joist_solutions_popup"></div>
<div class="truss_solutions_popup"></div>
<div class="fab_net_popup"></div>
<!--end .headerbottom-->
以下是完整的HTML
<div class="containerfab">
<div class="header">
<div class="headertop">
<img src="images2/login_butt.png" align="right" height "10%" width="7%" alt: "Log in to Amcon Steel Secured Site"/>
<!-- end .headertop -->
</div>
<div class="headerbottom"><a href="#"><img src="images2/AMCON_icon.png"
alt="Amcon Steel - Trusses - Joists - Wall Panels " name="Amcon_Steel_Logo" width="5%" height="80%" id="amconSteel_logo" style="padding-left:15px;" display:block; />
<img src="images2/AMCON_website_gallery_photos_1_0000s_0000s_0001_AMCONSTEEL-copy.png" alt="Amcon Steel - Trusses - Joists - Wall Panels " name="Amcon_Steel_Logo" width="35%" height="80%" id="amconSteel_logo" display:block; style="padding-right:75px;"/></a>
<!-- NavBar -->
<img src="images2/truss_solutions_butt.png" width="10%" height="80%" display:block; id="truss_solutions" />
<img src="images2/Joist_solutions_butt.png" width="10%" height="80%" display:block; id="joist_solutions" />
<img src="images2/wall_solutions_butt.png" width="10%" height="80%" display:block; id="wall_solutions" />
<img src="images2/fab_network_butt.png" width="13%" height="80%" display:block; id="fabricator_network" />
<!-- end NavBar-->
<div class="wtff"></div>
<div class="wall_solutions_popup"></div>
<div class="joist_solutions_popup"></div>
<div class="truss_solutions_popup"></div>
<div class="fab_net_popup"></div>
<!-- end .headerbottom -->
</div>
<!-- end .header -->
</div>
<div class="content">
<!-- absolute3 div is created for experiments with bottom project rollovers -->
<div class="absolute3"></div>
<table width="100%" height="70%" style="margin:20px 30px">
<tr>
<th style="color:white; text-shadow:2px 2px 2px black;font-size:28px; font-family:Frutiger; ">STEEL FLOOR JOISTS WITH MECHANICAL ACCESS</th>
<th></th>
</tr>
<tr>
<td width="65%" height="70%" background="images2/content_background.png" style="background-repeat:no-repeat; background-size:cover; padding:20px 20px; overflow:auto;">
<img src="images2/truss_solutions_img.png" align="left" height="20%" width="20%" style="padding:20px 10px 5px 10px;" />
<p style="padding:20px 10px 5px 10px; text-align:justify;"><b>Amconsteel</b> Joists are a cost-effective cold-formed steel (CFS) proprietary floor joist system ideally suited for the commercial and residential construction markets. The Amcon Joist combines the strength and consistency of a standard C-Shaped joist with the flexibility of pre-punched, reinforced access holes to greatly improve system installation time and architectural flexibility. Plumbing, HVAC, electrical and other technology services can be installed within the floor system, which makes installation easier while maintaining structural integrity.</p>
<p style="padding:5px 10px 5px 10px; text-align:justify;">All Amconsteel products are engineered to be perfectly compatible with one another, as well as with other corresponding structural products in the market. Backed by the strength and reliability of Amconsteel, the Amcon Joist System is an integral part of the <b>Amconsteel Total Solution</b>, Amcon's knowledge-oriented, solution-based approach to building.</p>
<div height="50%" width "50%" style="float:left;">
<img src="images2/joist_span_img.png" style="float:right;max-height:100%; max-width:100%;" />
<h3>Advantages</h3>
<ul>
<li>Architectural flexibility</li>
<li>High strength-to-weight ratio</li>
<li>Reduced need for onsite labor</li>
<li>Non-combustible</li>
<li>Environmentally responsible</li>
<li>High performance</li>
<li>Coordinates easily with MEP requirements</li>
<li>Dimensionally stable – does not rot, warp, split, crack or creep; and won’t expand or contract due to moisture content</li>
<li>Up to 10" diameter stiffened web punch-outs</li>
<li>Integrates easily with other building construction materials</li>
<li>Wide selection of sizes for many applications and long span conditions</li>
</ul>
</div>
</td>
<td width="35%" height="100%"></td>
</tr>
</table>
<!-- end .content -->
</div>
<div class="footer">
<table width="100%" height="100%">
<tr width="100%" height="100%">
<td width="3%" height="5%"><a href="http://www.facebook.com"><img src="images2/facebook_butt.png" style="padding-left:10px; display:block;"/></a>
</td>
<td width="3%" height="5%"> <a href="http://www.twitter.com"><img src="images2/twitter_butt.png" display:block; /></a>
</td>
<td width="3%" height="5%"> <a href="http://www.google.com"><img src="images2/email_butt.png" display:block; style="max-height:100%; max-width:100%" /></a>
</td>
<td width="10%" height="25%">
<p>Join Our Email List</p>
</a>
</td>
<td width="50%" height="10%">
<ps><a href="#">About Us</a> |<a href="#"> Gallery </a>| <a href="#">Technical Resources </a>| <a href="#">Standard Details </a>|<a href="#"> Contact Us</a>
</ps>
</td>
<td>
<img src="images2/CFSframing_project_butt.png" style="max-height:100%; max-width:100%" alt="Cold-Formed Steel(CFS) Projects" />
</td>
<td>
<img src="images2/Cambria_project_butt.png" style="max-height:100%; max-width:100%" />
</td>
<td>
<img src="images2/Hyatt_project_butt.png" style="max-height:100%; max-width:100%" />
</td>
<!-- end table-->
</tr>
</table>
<!-- end .footer -->
</div>
<!-- end .container -->
</div>
，這裏是我的Jquery的演出顯示/隱藏#fab_network是第一'錯誤'仍然存在，所有其他翻轉工作正常，#fab_network工作正常，在一個點上，不知道出了什麼問題，我試圖重新創建新的divs，但沒有運氣....
/* MouseOVer show/hide div, imgs. etc. */
$(document).ready(function() {
$('.wtff', '.joist_solutions_popup', '.truss_solutions_popup', 'wall_solutions_popup').show();
//When the Image is hovered upon, show the hidden div using Mouseover
$('#fabricator_network').hover(function() {
$('.wtff').fadeIn("slow");
}, function() {
$('.wtff').hide();
});
$('#wall_solutions').hover(function() {
$('.wall_solutions_popup').fadeIn("slow");
}, function() {
$('.wall_solutions_popup').hide();
});
$('#truss_solutions').hover(function() {
$('.truss_solutions_popup').fadeIn("slow");
}, function() {
$('.truss_solutions_popup').hide();
});
$('#joist_solutions').hover(function() {
$('.joist_solutions_popup').fadeIn("slow");
}, function() {
$('.joist_solutions_popup').hide();
});
});
這個類正在使用的div的CSS：.absolute3是第二個問題出在哪裏，出於某種原因，我無法讓它正確放置。我試圖將其右下角（它是爲「項目」介紹：
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background-image:url(images2/backgroundslideshow.gif);
background-size:cover;
background-repeat:no-repeat;
margin: 0 auto;
z-index:0;
position:absolute;
}
<!-- absolute div is created for experiments with show/hide div rollovers WORKING ...well it was --> .wtff {
display:none;
position:relative;
top:0;
right:-80%;
width:150px;
height:250px;
max-width:100%;
max-height:100%;
background-color:#0F0;
z-index:100;
}
.truss_solutions_popup {
display:none;
position:relative;
top:0;
right:-47%;
width:150px;
height:250px;
max-width: 100%;
max-height:100%;
background-color:#0FF;
z-index:200;
}
.joist_solutions_popup {
display:none;
position:relative;
top:0;
right:-58%;
width:150px;
height:250px;
max-width: 100%;
max-height:100%;
background-color:#fF0;
z-index:200;
}
.wall_solutions_popup {
display:none;
position:relative;
top:0;
right:-68%;
width:150px;
height:250px;
max-width: 100%;
max-height:100%;
background-color:#ccc;
z-index:110;
}
<!-- absolute3 div is created for experiments with bottom project rollovers NOT POSITIONED PROPERLY--> .absolute3 {
display:block;
position:relative;
top:-90px;
right:-68%;
width:150px;
height:250px;
max-width: 100%;
max-height:100%;
background-color:#ccc;
z-index:120;
}
.containerfab {
width: 80%;
max-width: 1260px;
/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;
/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background-image:url(images2/fab_network_background.png);
background-size:cover;
background-repeat:no-repeat;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
z-index:0;
position:relative;
}
感謝您對您的幫助提前，並提前在HTML（我我很抱歉，對於所有的造型！通常在HTML中設計w/inline CSS，然後移動到外部css工作表..）
隨着代碼這樣的量是最好的，如果你提供一個小提琴。 – SquareCat
謝謝你，我已經創建了一個小提琴，但它並不正確，由於這麼多的圖片功能以及..所以我走了，我已經更新了發佈一個答案小提琴鏈接 – MasterFuel
問題的鏈接了.. ，和btw你的小提琴是空的（！）。 – Sergio