Question

在IE和Chrome中完美运行。我觉得被Firefox背叛了。它永远不会给我带来麻烦。 Hmpht！

我已经尝试了所有我和谷歌，你们这里的人们可以想到无济于事。因此，我只会告诉你所有的事情，并希望有一些非常好的人过来拯救这一天！

SITE

http://mctesterson.net16.net/

CSS

body {
background:#000000 url(images/backmain.jpg) no-repeat fixed;
overflow-y:scroll;
padding:0;
margin:0;
}

body,html,#menu,#menu:before {
height:100%;
}

#title {
position:relative;
font-family:kaushan,"Lucida Sans Unicode",tahoma,arial;
font-size:60px;
color:#000000;
font-weight:bold;
text-align:left;
padding:0;
margin:0 0 40px -60px;
}

@font-face { 
font-family:kaushan;
src:url(images/kaushan.eot); 
}
@font-face { 
font-family:kaushan; 
src:url(images/kaushan.ttf); 
}

a:link,a:visited,a:hover,a:active {
font-family:kaushan,"Lucida Sans Unicode",tahoma,arial;
color:#CE0000;
font-size:25px;
font-weight:bold;
text-decoration:none;
outline:none;
}

#menu {
position:relative;
text-align:center;
padding:0;
margin:0;
}

#menu:before,#menumiddle {
display:inline-block;
vertical-align:middle;
}

#menu:before {
content:"";
}

#menurotate {
background:url(images/backmain.png) repeat;
float:left;
border:1px solid #000000;
border-radius:5px;
-webkit-transform:rotate(40deg); 
-moz-transform:rotate(40deg);
-ms-transform:rotate(40deg);
-o-transform:rotate(40deg);
transform:rotate(40deg);
box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000; 
-moz-box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000; 
-webkit-box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-moz-opacity:10;
-khtml-opacity:10;
opacity:10;
padding:10px;
margin:0 20px;
}

#menurotate:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="main.css" type="text/css"/>
<meta name="description" content="Things and stuff."/>
<meta name="keywords" content="web design,fiction,blog,"/>
<meta name="robots" content="noindex,follow"/>
<title>Oh Edie!</title>
</head>

<body>

<div id="menu">
<div id="menumiddle">
<div id="title">Oh Edie!</div>
<div id="menurotate"><a href="">About</a></div>
<div id="menurotate"><a href="">Web Design</a></div>
<div id="menurotate"><a href="">Fiction</a></div>
<div id="menurotate"><a href="">Blog</a></div>
<div id="menurotate"><a href="">Contact</a></div>
</div>
</div>
<div class="clear"></div>

</body>
</html>

提前感谢您的所有可爱帮助：o）

Answer 1

要避免此文字效果并仍然具有此不透明效果，

您可以将链接设置为半透明蒙版而不是切换opacity;

#menurotate:hover:before {
content:'';
position:absolute;
top:-0px;
left:-0px;
right:-0px;
bottom:-0px;
background:rgba(255,255,255,0.4);
border-radius:5px;
box-shadow:0 0 20px rgba(255,255,255,0.6)
}

或者为了减少这种跳跃效果，转换可以使这个改变变得更平滑：

#menurotate {transition:0.5s;}

如上所述，id只能在每个文档中使用一次，将id="menurotate"转换为class="menurotate"并在样式表中将选择器#menurotate更新为.menurotate。

在Firefox中悬停时旋转的链接文本跳转

1 个答案: