0

如果您将鼠标悬停在<img>“hiddenPanel”<div>上，就会出现。这在 FF 和其他浏览器中运行良好，但在 IE 中<div>出现在 'content' 后面<div>。我试过 z-indexing 无济于事。还有其他人有这个问题吗？

<div>（另外，出于布局原因，我不会在“内容”之后移动代码）

编辑：更多代码；jQuery / HTML / CSS ...

jQuery

    /* Column Left #1 */      
    $('.columnLeft_spec1_panel').hide().css('opacity','0.0');
    $('.columnLeft_spec1').mouseover( function() { $('.columnLeft_spec1_panel').animate({ width: '337px', height: '234px', opacity: 1.0 }, 1250 ); });
    $('.columnLeft_spec1_panel').mouseout( function() { $('.columnLeft_spec1_panel').animate({ width: '1px', height: '1px', opacity: 0.0 }, 1250 ); });

html

<div class="columnLeft">
  <img runat="server" src="~/images/pc_blocks_columnLeft_spec1.gif" class="columnLeft_spec1" alt="" />
  <a runat="server" href="~/" class="columnLeft_spec1_panel">&nbsp;</a>
  <img runat="server" src="~/images/pc_blocks_columnLeft_spec2.gif" class="columnLeft_spec2" alt="" />
  <a runat="server" href="~/" class="columnLeft_spec2_panel">&nbsp;</a>
</div>

<div class="columnRight">
  <img runat="server" src="~/images/pc_blocks_columnRight_spec1.gif" class="columnRight_spec1" alt="" />
  <a runat="server" href="~/" class="columnRight_spec1_panel">&nbsp;</a>
</div>

<asp:ContentPlaceHolder ID="main" runat="server"></asp:ContentPlaceHolder>

<div class="subnav">
  <asp:ContentPlaceHolder ID="subnav" runat="server"></asp:ContentPlaceHolder>
</div>

<div class="content">
  <div class="leftPanel">
    <asp:ContentPlaceHolder ID="leftPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
  <div class="midPanel">
     <asp:ContentPlaceHolder ID="midPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
  <div class="rightPanel">
    <asp:ContentPlaceHolder ID="rightPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
</div>

CSS

    /* CONTENT
    ======================================================================*/
    .content {
      position:relative;
      height:auto; width:800px; _width:795px;
      margin:5px 5px 0px 90px; padding:20px 10px;
      min-height:250px; z-index:0;
      background:#FFF;
    }
    .leftPanel, .midPanel { float:left; }
    .rightPanel { float:left; }

    .content .leftPanel {
      height:auto; width:150px;
    }
    .content .midPanel {
      height:auto; width:375px;
      border-right:solid 1px #78A22F;
      padding:0px 30px 30px 30px;
    }
    .content .rightPanel {
      height:auto; width:180px;
      padding:0px 0px 0px 20px;
    }

    /* COLUMNS
    ======================================================================*/
    .columnLeft, .columnRight {
      height:245px; width:85px;
      background:#EEEEEE;
      margin-top:5px; position:relative;
    }
    .columnLeft {
      float:left; background:url(../images/pc_blocks_columnLeft.gif) no-repeat;
    }
    .columnLeft .columnLeft_spec1 {
      position:absolute;
      top:0px; right:0px;
    }
    .columnLeft .columnLeft_spec1_panel {
      display:none; background:url(../images/pc_columnLeft_spec1.jpg) no-repeat;
      position:absolute; z-index:5;
      left:0px;
    }
4

2 回答 2

1

建议：检查你的CSS！有些事情在 FF 中运行良好，但在 IE 中您必须重做大部分事情，因为我们都知道 IE 在遵循 W3C 标准时是一个大问题。

这是我做的一个演示：

$(document).ready(function () 
    {
        $(".hoverMe").mouseover(function ()
        {
            $(".hiddenPanel").fadeIn('slow');
        }).mouseout(function ()
        {
            $(".hiddenPanel").fadeOut('slow');
        });
    });

这是html：

<img class="hoverMe" alt="HOVER ME" /> <div class="hiddenPanel" style="display: none; color: blue; font-size: 20px; font-weight: bold;">This is the hidden panel</div> 
    <div class="content" style="color: red;">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

您还可以试用上面的代码演示，它可以按预期在 IE 中运行。

于 2009-03-30T16:03:52.357 回答
0

内容 div 是否包含 Flash 文件？

如果是，那么你需要检查这个问题，它有你的解决方案。

如果您可以发布您的 jQuery 代码和您正在使用的 CSS，那将有很大帮助。

于 2009-03-30T15:53:14.333 回答