0

当我将鼠标悬停在iframecss 更改时，我的页面上有一个功能position，z-index因此它iframe变得更大并移动到前面。但是它不会在 IE 中工作。很难触发悬停更改（我必须在 div 的边界上缓慢移动），并且当它触发时，放大iframe的内容丢失了。

JSfiddle 为此： http: //jsfiddle.net/LWRUd/ （顺便说一句，小提琴工作正常）

CSS：

.server-unit-head{
    width: 300px;
    background-color: #ccccdd;
    font-size: 8pt;
    text-align:left;
    color:blue;
    /*This causes words to wrap on characters as opposed to white spaces*/
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

.server-unit{
    height: 300px;
    width: 300px;
    z-index: 0;
    position: relative;
}

.server-unit:hover{
    background-color: transparent;
    z-index: 50;
}

.server-unit span{ /*CSS for enlarged iframe*/
    position: absolute;
    background-color: #ccccff;
    padding: 5px;
    left: -1000px;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.server-unit:hover span{ /*CSS for enlarged iframe on hover*/
    visibility: visible;
    top: 1px;
    left: 1px; /*position where enlarged iframe should offset horizontally */
}

HTML：

<td class="server-unit-head">
    <p>${serverUnit}</p>
    <div class="server-unit">
        <p><iframe name="iFrameName" height="297" width="297" scrolling="no" src=" ${serverUnit}"><p>Your browser does not support iframes.</p></iframe>
        <span><iframe name="iFrameName" height="500" width="500" scrolling="yes" src=" ${serverUnit}"><p>Your browser does not support iframes.</p></iframe></span>
    </div>
</td>
4

0 回答 0