2
JSFIDDLE 꽤 보이지 않고 자리는 여전히 지속 필요 .. 이슈가 .cambria_project_popup하고 마우스 오버시 표시하지 .hyatt_poject_popup 장소에 있습니다.
끝 편집 바라기를 이것은 간과 한 간단한 문제입니다. 여기서는 두 가지 버그에 직면하고 있습니다.
첫 번째가 처음에 작동하고 멈추었는데,이 일이 어떻게 진행되고 있는지 파악할 수 없습니다.
둘째로, 컨테이너 내의 다른 위치 (하단, 우측)에서 동일한 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-->
<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>
입니다 #fab_network 어디 처음이다 '버그'가 계속 유지되고 다른 모든 롤오버는 정상적으로 작동하며 #fab_network는 문제가 무엇인지 잘 모르겠습니다. 새 div 등을 다시 만들려고 노력했지만 행운이 없었습니다 ....
/* 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는 입니다. 절대 3은 두 번째 문제가 웬일인지 제대로 배치되지 못하는 부분입니다.
/* ~~ 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;
}
코드의 양은 피들을 제공하는 것이 가장 좋습니다. – SquareCat
나는 바이올린을 만들었지 만 너무 많은 이미지 때문에 제대로 작동하지 않아 .. 링크를 빠져 나갔다. 나는 바이올린 링크로 질문을 업데이트했다. – MasterFuel
답변 게시 됨 btw 귀하의 바이올린은 비어 있습니다 (!). – Sergio