2
EDITJQuery ошибка показать/скрыть элемент
JSFIDDLE не выглядит красиво, но заполнителей в месте, где это необходимо .. вопросы, которые до сих пор сохраняются являются .cambria_project_popup и .hyatt_poject_popup не в состоянии показать на мыши над.
END EDIT Надеюсь, это простая проблема, которую я упустил, я столкнулся с двумя различными ошибками.
Первый изначально работал, а затем он остановился, я не могу понять, что происходит с этим.
Во-вторых, проблема с позиционированием с использованием одних и тех же функций jquery в другом месте (внизу, справа) внутри контейнера.
вопросы выделены жирным шрифтом ..
ОБРАТИТЕСЬ К скрипку Обновлено КОДЕКСА
Вот мой код. Заинтересованная с первым номером дивы внутри контейнера .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 работает нормально в какой-то момент, не уверен, что пошло не так, я попытался воссоздать новые 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();
});
});
CSS для divs, которые используются в этом классе: .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 (I! как правило, дизайн w/inline CSS в HTML, затем перейдите на внешние листы css ..)
С таким количеством кода лучше всего, если вы предоставите скрипку. – SquareCat
Спасибо, что я создал скрипку, но она не работает должным образом из-за большого количества изображений. Поэтому я оставил ссылку. Я обновил вопрос со ссылкой на скрипку – MasterFuel
Написал ответ и Кстати, ваша скрипка пуста (!). – Sergio