当我将鼠标悬停在iframe上时,我的页面上有一项功能css会更改position和z-index,以便iframe变得更大并移到前面。但它不会在IE中工作。很难让悬停变化触发(我必须在div的边界上缓慢移动),当它触发时,忽略了放大的iframe。
JSfiddle for this: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:
${serverUnit}
Your browser does not support iframes.
Your browser does not support iframes.