JQuery 错误显示/隐藏元素答案

【问题标题】：JQuery bug show/hide elementJQuery 错误显示/隐藏元素
【发布时间】：2013-12-14 21:56:32
【问题描述】：

编辑

JSFIDDLE 看起来不太漂亮，但占位符在必要时已到位.. 仍然存在的问题是 .cambria_project_popup 和 .hyatt_poject_popup 在鼠标悬停时无法显示。

结束编辑 希望这是一个我忽略的简单问题，我在这里面临两个不同的错误。

第一个开始工作，然后停止，我似乎无法弄清楚这是怎么回事。

其次，在容器内的不同位置（底部、右侧）使用相同的 jquery 函数进行定位是一个问题。

问题以粗体显示..

更新代码请参考 FIDDLE

这是我的代码。与第一个问题有关的 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 曾经正常工作，而不是确定出了什么问题，我试图重新创建新的 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：.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/ 内联 CSS，然后移至外部 css 表..）

【问题讨论】：

有这么多的代码，最好提供一个小提琴。
谢谢我创建了一个小提琴，但由于图像太多，它也无法正常工作..所以我把链接去掉了..我用小提琴链接更新了问题
发布了答案，顺便说一句，你的小提琴是空的（！）。
看到你添加了一个新的小提琴。请从 CSS 中删除所有  并用 /* content */ 替换它们。 absolute3 就是其中一种情况

标签： jquery css html show-hide

【解决方案1】：

不清楚您要做什么 + 您的代码一团糟。不需要最大宽度：100%；和最小宽度：100%；如果你给定宽度。唯一的区别是 IE6 使用宽度作为最小宽度。否则宽度将是最大和最小宽度。通常导航在语义上是一个列表，因此没有带有<a> 元素的div，但<ul> 带有<li> 和<a> 元素是常态。也不需要在所有东西上都使用绝对位置，仅在您确实需要创建“剪切”层并将某些东西放置在彼此之上时才使用它。否则，您只会让自己变得困难，因为没有人会知道其余的内容流。当您放置某些东西（绝对或固定）时，它们将被“剪掉”并放在新层上。所以剩下的内容就不知道了。

关于 .fab_net_popup 的问题：

.fab_net_popup {
    position: absolute; /* works if you change this to relative */
}

如果您使用 px 而不是 % 作为宽度，也更容易编码。稍后您仍然可以更改它。

【讨论】：