Question

我在IE8中遇到了一些div。不幸的是，由于我公司的限制，我陷入了IE8 - 我们仍然在使用XP。但我离题了。

我有一个快速链接的信息面板，共15个盒子，每行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>

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

我不确定这是否是你想要的东西，或者你是否可以挑选一些东西来帮助你的格式化。但是这里有一些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>

用JS-IE8悬停在其他div下扩展的Div：¬（

1 个答案: