0

onmouseoverdivのツールチップを表示しています。ツールチップは Firefox と IE8 で正しく表示されます。しかし、IE-7 では div の後ろに来ています。HTML マークアップ

<table cellspacing="0" cellpadding="5" border="0" id="tblEmployee">
<tbody>
<tr>
<td>
<div class="dvBorder" empid="1" nomineeid="21">
<img style="padding: 5px;" src="../../Images/user.jpg" alt="user">
<span class="EmpolyeeName">First Last</span><span class="EmployeeEmail">mail@amdocs.com</span></div></td>
</tr>
</table>

ユーザーが div.dvBorder にマウスオーバーすると、jquery 関数を使用してツール ヒントが動的に作成されます。

 function RollOut(result,crntDiv) {
            $(crntDiv).children('img').before(CreateElems('div', 'RollOverTip', result));
        }

function CreateElems(type,cssClass,value)
        {
            var elem = $(document.createElement(type));

            if(value != null)
                elem.text(value);

            if(cssClass!= null)
                elem.addClass(cssClass);

            return elem;
        }

CSS クラス。

.RollOverTip
{
    background-image: url("/Images/screen2-rollover-tooltip.png");
    background-repeat: no-repeat;
    color: #000000;
    font-family: Calibri Regular;
    font-size: 18pt;
    height: 199px;
    line-height: 20pt;
    margin-left: 385px;
    position: absolute;
    width: 474px;
    z-index: 90000;
    padding:34px;
}

.dvBorder
{
    background-image: url(/Images/screen2-button.png);
    background-repeat: no-repeat;
    height: 125px;
    width: 400px;
    cursor:pointer;
    position: relative;
}

IE-8,FFで動作しているため、cssに問題がありますか。

4

1 に答える 1

-1

z-index を .dvBorder クラスに追加してみてください:

.dvBorder
{
    background-image: url(/Images/screen2-button.png);
    background-repeat: no-repeat;
    height: 125px;
    width: 400px;
    cursor:pointer;
    position: relative;
    z-index:0; /* If this doesn't work, try -1 */
}
于 2013-02-20T08:34:38.497 に答える