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

Question

I'm struggling with some divs in IE8.我在 IE8 中遇到了一些 div。 And unfortunately I'm stuck in IE8 due to my company's limitations - hell we're still on XP.不幸的是，由于我公司的限制，我被困在 IE8 中 - 地狱我们仍然在 XP 上。 But I digress.但我离题了。

I have an information panel of quick links which is 15 boxes in five rows of three.我有一个快速链接的信息面板，它有 15 个框，每排三排。 Each row of three is in its own containing div.每行三个都在它自己的包含 div 中。 On hovering over the boxes they expand to show the full contents of links.将鼠标悬停在框上时，它们会展开以显示链接的完整内容。

My problem is that the top of the boxes expand within the containing div, thus truncating the text and the bottom expand UNDER the next rows.我的问题是盒子的顶部在包含的 div 内展开，从而截断了文本，底部在下一行展开。

I've tried playing with the z indices and different overflow settings but to no avail.我试过使用 z 索引和不同的溢出设置，但无济于事。 I can't post a jsfiddle because it doesn't work in IE but my code is here if anyone can help..我无法发布 jsfiddle，因为它在 IE 中不起作用，但如果有人可以提供帮助，我的代码就在这里。

Thanks for any help谢谢你的帮助

Chris克里斯

CSS: 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 (first two rows only) 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>

JS JS

<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>

Answer 1

I'm not sure if this is the kind of thing you want, or if you can pick bits out to help with your formatting.我不确定这是否是您想要的类型，或者您是否可以挑选一些内容来帮助您进行格式化。 But here's some html I've been playing with using relative and absolute positioning, also using the additional function for the hover in jquery, which enables you to define what to do on unhover.但这里有一些 html 我一直在使用相对和绝对定位，还使用了 jquery 中悬停的附加功能，它使您能够定义在取消悬停时要执行的操作。 Plus the adding and removing of classes on an object.加上在对象上添加和删除类。

Hope it helps希望能帮助到你

Styles样式

<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>

body身体

<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脚本

<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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-04-11 10:33:11

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-04-11 10:33:11

解决方案1
1 已采纳 2014-04-11 10:33:11