这是我要放在一起的东西：
在IE中，当您将鼠标悬停在字标上时，一旦它已经向右移动，其下方图层上的悬停效果将停用（导致图标淡出）。我相信这是因为悬停在wordmark上是删除底层的悬停属性，尽管wordmark zindex设置在另一层之下。我尝试过像unselectable = on，zindex更改，更改显示设置等但我似乎无法让它按照我想要的方式工作。有人可以解释为什么会这样，或者让我知道是否有解决方法。在Moz和Chrome中，一切似乎都很好。感谢。
<body class="nm np">
<div class="topnav" unselectable="on">
<div class="fontw100 white nm np font2 dispin" id="date">
<img src="img/facebook.png" id="fb">
<img src="img/twitter.png" id="tw">
</div>
<h1 class="fontw100 white nm np font1" id="wordmark" unselectable="on">VZNR</h1>
</div>
<div class="" id="bodytest"></div>
<div class="botnav">
<h1 class="fontw100 white nm np font2" id="footmsg">hover me</h1>
</div>
</body>
/* DOCUMENT */
html, body, head, h1, h2, h3, h4, p, li, ul, input {
margin:0;
padding: 0;
list-style: none;
}
html {
/*
background-image: url(img/bgbody.jpg);
*/
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
}
body {
background-color: #a8d4ff;
}
/* LAYOUT ITEMS */
.topnav {
width: 100%;
height: 40px;
background-color: #01182e;
position: fixed;
top: 0px;
z-index: 9;
/*transition-property*/
-webkit-transition-property:color, background, text-shadow, box-shadow;
-moz-transition-property:color, background, text-shadow, box-shadow;
-o-transition-property:color, background, text-shadow, box-shadow;
transition-property:color, background, text-shadow, box-shadow;
/*transition-duration*/
-webkit-transition-duration:.2s, .2s, .1s, .2s;
-moz-transition-duration:.2s, .2s, .1s, .2s;
-o-transition-duration:.2s, .2s, .1s, .2s;
transition-duration:.2s, .2s, .1s, .2s;
/*transition-timing-function*/
-webkit-transition-timing-function:linear, ease-in;
-moz-transition-timing-function:linear, ease-in;
-o-transition-timing-function:linear, ease-in;
transition-timing-function:linear, ease-in;
}
.topnav:hover {
background-color: #ededed;
box-shadow: 0px 1px 10px #c9c9c9;
}
#date {
position: absolute;
margin: auto 0;
left: 150px;
margin-right: 50px;
font-size: 35px;
margin-left: 50px;
color: transparent;
z-index: 11;
width: 400px;
opacity: 0.0;
display: block;
/*transition-property*/
-webkit-transition-property:opacity;
-moz-transition-property:opacity;
-o-transition-property:opacity;
transition-property:opacity;
/*transition-duration*/
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
/*transition-timing-function*/
-webkit-transition-timing-function:ease-in;
-moz-transition-timing-function:ease-in;
-o-transition-timing-function:ease-in;
transition-timing-function:ease-in;
}
#date > img {
margin-right: 10px;
margin-top: 4px;
}
#date > img:hover {
}
#fb {
margin-bottom: 5px;
}
#fb:hover {
margin-bottom: 4px;
}
#tw {
margin-bottom: 5px;
}
#tw:hover {
margin-bottom: 4px;
}
#wordmark {
overflow: hidden;
margin: auto 0;
margin-left: 50px;
margin-right: 50px;
font-size: 35px;
text-shadow:1px 1px 0px #000000;
position: absolute;
left: 150px;
z-index: 10;
width: 100px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/*transition-property*/
-webkit-transition-property:color, background, text-shadow, left;
-moz-transition-property:color, background, text-shadow, left;
-o-transition-property:color, background, text-shadow, left;
transition-property:color, background, text-shadow, left;
/*transition-duration*/
-webkit-transition-duration:.3s, .3s, .2s, .2s;
-moz-transition-duration:.3s, .3s, .2s, .2s;
-o-transition-duration:.3s, .3s, .2s, .2s;
transition-duration:.3s, .3s, .2s, .2s;
/*transition-timing-function*/
-webkit-transition-timing-function:linear, ease-in;
-moz-transition-timing-function:linear, ease-in;
-o-transition-timing-function:linear, ease-in;
transition-timing-function:linear, ease-in;
}
#wordmark:hover {
left: 250px;
}
#wordmark:hover ~ #date {
opacity: 1.0;
}
#date:hover + #wordmark {
left: 250px;
color: #bababa;
cursor: pointer;
text-shadow: 1px 1px 0px #757575;
}
#date:hover {
opacity: 1.0;
}
#bodytest {
width: 960px;
height: 3000px;
margin: 0 auto;
background-color: #dedede;
margin-top: 90px;
border-top-right-radius: 20px;
border-top: 1px solid #cccccc;
border-right: 1px solid #cccccc;
-webkit-transition-property:color, background, text-shadow;
-webkit-transition-duration: .3s, .3s, .2s;
-webkit-transition-timing-function: linear, ease-in;
}
#bodytest:hover {
background-color: #e0e0e0;
}
.botnav {
width: 100%;
height: 20px;
background-color: #000000;
position: fixed;
bottom: 0px;
z-index: 100;
/*transition-property*/
-webkit-transition-property:color, background, text-shadow, box-shadow, height;
-moz-transition-property:color, background, text-shadow, box-shadow, height;
-o-transition-property:color, background, text-shadow, box-shadow, height;
transition-property:color, background, text-shadow, box-shadow, height;
/*transition-duration*/
-webkit-transition-duration:.2s, .2s, .1s, .1s, .2s;
-moz-transition-duration:.2s, .2s, .1s, .1s, .2s;
-o-transition-duration:.2s, .2s, .1s, .1s, .2s;
transition-duration:.2s, .2s, .1s, .1s, .2s;
/*transition-timing-function*/
-webkit-transition-timing-function:linear, ease-in;
-moz-transition-timing-function:linear, ease-in;
-o-transition-timing-function:linear, ease-in;
transition-timing-function:linear, ease-in;
}
.botnav:hover {
background-color: #dedede;
box-shadow: 0px -1px 10px #c9c9c9;
height: 100px;
}
#footmsg {
overflow: hidden;
margin: auto 0;
margin-left: 50px;
font-size: 16px;
text-shadow:1px 1px 0px #000000;
text-transform: uppercase;
/*transition-property*/
-webkit-transition-property:color, background, text-shadow;
-moz-transition-property:color, background, text-shadow;
-o-transition-property:color, background, text-shadow;
transition-property:color, background, text-shadow;
/*transition-duration*/
-webkit-transition-duration:.3s, .3s, .2s;
-moz-transition-duration:.3s, .3s, .2s;
-o-transition-duration:.3s, .3s, .2s;
transition-duration:.3s, .3s, .2s;
/*transition-timing-function*/
-webkit-transition-timing-function:linear, ease-in;
-moz-transition-timing-function:linear, ease-in;
-o-transition-timing-function:linear, ease-in;
transition-timing-function:linear, ease-in;
}
#footmsg:hover {
color: #bababa;
cursor: pointer;
text-shadow: 1px 1px 0px #757575;
}
/* BOX MODEL */
.nm {
margin: 0;
}
.np {
padding: 0;
}
.floatl {
float: left;
}
.dispin {
display: inline;
display: inline-block;
}
/* COLOR */
.white {
color: #FFFFFF;
}
.bgwhite {
background-color: #FFFFFF;
}
/* TEXT */
.textthin {
font-weight: 300;
}
.fontw100 {
font-weight: 100;
}
/* DECLARE YOUR STYLE VARIABLES HERE */
.font1 {
font-family:'Raleway', sans-serif;
}
.font2 {
font-family:'Open Sans Condensed', sans-serif;
}
.font3 {
font-family:'Libre Baskerville', serif;
}
.font4 {
font-family:'Montserrat', sans-serif;
}