个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 10:11:13 25 4
gpt4 key购买 nike

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

我已经尝试了我和 Google 以及你们能想到的所有方法，但都无济于事。因此，我将向您展示所有细节，并希望有一些非常棒的人来拯救这一天!

站点

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)

最佳答案

为了避免这种文字效果并且仍然有这种不透明效果，

您可以将悬停链接设置为半透明 mask ，而不是切换不透明度；

#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。

关于html - 旋转的链接文本在 Firefox 中悬停时跳转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24376160/

25 4 0
文章推荐： css - 网页字体垂直间距
文章推荐： jquery - 添加到列表并通过 html 表单和 jquery 提交的问题
文章推荐： javascript - 如何使用javascript获取方法参数的值？
文章推荐： html文档滚动没有溢出
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com