使用 JS 悬停在其他 div 下扩展的 div - IE8 :¬(答案

【问题标题】：Divs expanding under other divs on hover with JS - IE8 :¬(使用 JS 悬停在其他 div 下扩展的 div - IE8 :¬(
【发布时间】：2014-04-11 08:51:38
【问题描述】：

我在 IE8 中遇到了一些 div 问题。不幸的是，由于我公司的限制，我被困在 IE8 中——我们仍然在 XP 上。但我离题了。

我有一个快速链接信息面板，它有 15 个框，每排 3 排，每排 5 排。三行的每一行都在其自己的包含 div 中。将鼠标悬停在框上时，它们会展开以显示链接的完整内容。

我的问题是框的顶部在包含的 div 内展开，因此截断了文本，底部在下一行展开。

我尝试过使用 z 索引和不同的溢出设置，但无济于事。我无法发布 jsfiddle，因为它在 IE 中不起作用，但如果有人能提供帮助，我的代码就在这里..

感谢您的帮助

克里斯

CSS：

#wrapper
{    align: center;
margin-bottom:-10px;   }

#header
{    align: center;
width:100%;
margin-left:15px; }


#panelcontainer
{
float:right;
margin-right:-30px;
width:480px;
overflow:visible;
}

#catcontainer
{
float:right;
width:495px;    
}


.cat
{
background-color: #000000;
line-height: 1.7em;
float:right;
color:yellow;
margin-right: 5px;
margin-top: 2px;
margin-left: 3px;
padding-left: 5px;
width:154px;
height:100px;
border: solid 1px; 
border-color: #ffff80;
overflow: hidden;
 }


.cat3g
{
position: absolute;
z-index: -100000;
overflow: visible;
}

HTML（仅限前两行）

<body>

<title>Info Panel</title> 
<div id="wrapper">
<div id="header">
<center><img src="images/ttpip.png" border=0 height=45px></center>
</div>


<!-- The squares-->

<div id="catcontainer">
<div class="cat3g" style="top: 260px;">
<div class="cat">

    <strong>Heading 1</strong><br>
    <a href="link" target="_blank">Link 1</a><br> 
    <a href="link" target="_blank">Link 2</a><br> 

</div>

<div class="cat">

    <strong>Heading 2</strong><br>
    <a href="link" target="_blank">Link 1</a><br> 
    <a href="link" target="_blank">Link 2</a><br>
</div>


<div class="cat">

    <strong>Heading 3</strong><br>
    <a href="link" target="_blank">Link 1</a><br> 
    <a href="link" target="_blank">Link 2</a><br>
</div>
</div>
<div class="cat3g" style="top: 370px;">
<div class="cat">

    <strong>Heading 4</strong><br>
    <a href="link" target="_blank">Link 1</a><br> 
    <a href="link" target="_blank">Link 2</a><br> 

</div>

<div class="cat">

    <strong>Heading 5</strong><br>
    <a href="link" target="_blank">Link 1</a><br> 
    <a href="link" target="_blank">Link 2</a><br>
</div>


<div class="cat">

    <strong>Heading 6</strong><br>
    <a href="link" target="_blank">Link 1</a><br> 
    <a href="link" target="_blank">Link 2</a><br>
</div>
</div>

</div>
</div>

<script type='text/javascript' src='js/jquery-1.9.1.js'></script>

<script type='text/javascript'>
$(window).load(function()
{
    $('.cat').hover(function (e) 
    {    $(this).stop(true, true).animate(


{   marginTop: e.type == 'mouseenter' ?  "-50px" : '2px',
        height: e.type == 'mouseenter' ?  "220px" : '100px',
            fontSize: e.type == 'mouseenter' ?  "20pt" : '10pt'
    }
    , 400);

    });});

</script>

【问题讨论】：

嗨，克里斯，我不完全确定您的问题是什么。 js 正在运行并执行我期望它执行的操作。所以目前。如果您将鼠标悬停在顶行上，则项目会变大并向上移动。如果您将鼠标悬停在中间和底行上，它会与上面的行重叠。将鼠标悬停在中间右侧会将底部推向左侧。将鼠标悬停在左中会向下移动底部。其中哪一个是问题。只是为了让我正确理解
嗨，Rob，我希望悬停的框在上方和下方行中的框顶部展开。目前，包含 div cat3g 正在提供一个“信箱视图”，它以overflow:hidden 的方式切断顶部和底部。如果这有意义的话。

标签： javascript html hover jquery-animate

【解决方案1】：

我不确定这是否是您想要的，或者您是否可以挑选一些内容来帮助您进行格式化。但是这里有一些我一直在使用相对和绝对定位的 html，还使用了 jquery 中悬停的附加功能，它使您能够定义在取消悬停时要做什么。加上在对象上添加和删除类。

希望对你有帮助

样式

<style>
    .box {
        width: 100px;
        height: 100px;
        float: left;
        position: relative;
        padding: 2px;
    }

    .boxContent {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: black;
        color: white;
        border: 1px solid red;
    }

    .boxContainer {
        width: 312px;
        height: 500px;
    }

    .top {
        z-index: 9999999;
    }
</style>

身体

<div class="boxContainer">
    <div class="box left">
        <div class="boxContent"></div>
    </div>
    <div class="box middle">
        <div class="boxContent"></div>
    </div>
    <div class="box right">
        <div class="boxContent"></div>
    </div>
    <div class="box left">
        <div class="boxContent"></div>
    </div>
    <div class="box middle">
        <div class="boxContent"></div>
    </div>
    <div class="box right">
        <div class="boxContent"></div>
    </div>
    <div class="box left">
        <div class="boxContent"></div>
    </div>
    <div class="box middle">
        <div class="boxContent"></div>
    </div>
    <div class="box right">
        <div class="boxContent"></div>
    </div>
    <div class="box left">
        <div class="boxContent"></div>
    </div>
    <div class="box middle">
        <div class="boxContent"></div>
    </div>
    <div class="box right">
        <div class="boxContent"></div>
    </div>
    <div class="box left">
        <div class="boxContent"></div>
    </div>
    <div class="box middle">
        <div class="boxContent"></div>
    </div>
    <div class="box right">
        <div class="boxContent"></div>
    </div>
</div>

脚本

<script type='text/javascript'>
    $(window).load(function () {


        $('.middle .boxContent').hover(function (e) {

            $(this).addClass("top");
            $(this).stop(true, true).animate(
        {
            marginTop: "-50px",
            marginBottom: "-50px",
            marginLeft: "-50px",
            marginRight: "-50px"
            //marginTop: e.type == 'mouseenter' ? "-50px" : '0px',
            //marginBottom: e.type == 'mouseenter' ? "-50px" : '0px',
            //marginLeft: e.type == 'mouseenter' ? "-50px" : '0px',
            //marginRight: e.type == 'mouseenter' ? "-50px" : '0px',
            //fontSize: e.type == 'mouseenter' ? "20pt" : '10pt'
        }
            , 400);

        }, function () {


            $(this).stop(true, true).animate(


        {
            marginTop: "0px",
            marginBottom: "0px",
            marginLeft: "0px",
            marginRight: "0px"

        }, 400);
            $(this).removeClass("top");

        });


        $('.left .boxContent').hover(function (e) {

            $(this).addClass("top");
            $(this).stop(true, true).animate(
        {
            marginTop: "-50px",
            marginBottom: "-50px",
            marginRight: "-100px"
        }
            , 400);

        }, function () {


            $(this).stop(true, true).animate(


        {
            marginTop: "0px",
            marginBottom: "0px",
            marginLeft: "0px",
            marginRight: "0px"

        }, 400);
            $(this).removeClass("top");

        });


        $('.right .boxContent').hover(function (e) {

            $(this).addClass("top");
            $(this).stop(true, true).animate(
        {
            marginTop: "-50px",
            marginBottom: "-50px",
            marginLeft: "-100px"
        }
            , 400);

        }, function () {


            $(this).stop(true, true).animate(


        {
            marginTop: "0px",
            marginBottom: "0px",
            marginLeft: "0px",
            marginRight: "0px"

        }, 400);
            $(this).removeClass("top");

        });
    });

</script>

【讨论】：

罗伯，谢谢！这让我走上了正轨——但是它在 IE8 中无法正常工作。在 HTML 中无法识别在 class 语句中添加 left、middle 和 right 到 box。这些框没有宽度或高度出现，并且在悬停时都沿对角线左上角移动。我看到您在脚本中指的是.left、.right 和.middle 类——这又是IE8 的限制吗？
确保您已在页面上添加了文档类型。我已经读过，如果你没有它，它会阻止 ie8 识别多个类:-)
这成功了 Rob 非常感谢！再加上一些其他的摆弄。现在只是在 IE8 版本之间遇到了一个奇怪的问题 - 难以置信！我有一个 8.0.6 的版本，它可以工作，而我在另一台机器上的 8.0.7 没有运行。所有盒子都在彼此下方打开（回到我原来的问题！），左上角是唯一一个可以平滑动画的盒子 - 其他盒子只是捕捉到展开的尺寸。这几乎就像 .top 类被忽略了。
好的，现在已修复 - 成功了。我讨厌 IE。感谢您指出正确的方向。我学到了很多东西。
再次嗨@Rob White - 刚刚注意到我已经合并的脚本/html中的一些内容。盒子在它们邻居的顶部展开，可以，但是当你将鼠标悬停在外面时，右手边会在收缩之前翻转到相邻的正方形下面。左侧的行为符合预期。因此，右列工作得很好，中半部分可以，左列根本不行。有什么线索吗？移动$(this).removeClass("top"); 没有区别。