我一直在使用本教程 ( http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/ ) 在 http://kikidesign.net 构建我的页脚菜单.它仅适用于桌面版本。我正在尝试编辑移动版本的页脚菜单,为此,我尝试取消@media 中的效果。
桌面版
.ca-menu {
padding: 0;
margin: 20px auto;
width: 100%;
text-decoration: none;
}
.ca-menu li {
float: left;
width: 22.916666667%;
overflow: hidden;
position: relative;
background: none;
margin-right: 4px;
text-decoration: none;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-menu li:hover {
z-index:999;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.ca-menu li:hover .aboutimg, .ca-menu li:hover .contactimg, .ca-menu li:hover .downloadimg, .ca-menu li:hover .facebookimg {
color: #ffffff;
/**font-size: 30px;**/
opacity:0.3;
}
.ca-main{
font-family: 'PrintClearlyRegular';
font-weight: normal;
font-style: normal;
font-size: 1.75em;
text-align: center;
padding: 5px 0 0 0;
text-align: center;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
text-decoration: none;
}
.ca-menu li:hover .ca-main{
color: #ffffff;
-webkit-animation: smallToBig 300ms ease;
-moz-animation: smallToBig 300ms ease;
-ms-animation: smallToBig 300ms ease;
font-size: 2.1em;
padding: 5px 0 0 0;
margin: 0;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
position: relative;
text-decoration: none;
}
@-webkit-keyframes smallToBig{
from {
-webkit-transform: scale(0.1);
}
to {
-webkit-transform: scale(1);
}
}
@-moz-keyframes smallToBig{
from {
-moz-transform: scale(0.1);
}
to {
-moz-transform: scale(1);
}
}
@-ms-keyframes smallToBig{
from {
-ms-transform: scale(0.1);
}
to {
-ms-transform: scale(1);
}
}
移动版(@media only screen and (max-width: 480px))
.ca-menu li {
float: left;
width: 100%;
overflow: hidden;
position: relative;
background: none;
margin-right: 4px;
text-decoration: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
.ca-menu li:hover {
z-index:0;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.ca-menu li:hover .aboutimg, .ca-menu li:hover .contactimg, .ca-menu li:hover .downloadimg, .ca-menu li:hover .facebookimg {
color: #ffffff;
/**font-size: 30px;**/
opacity: 1;
}
.ca-main{
font-family: 'PrintClearlyRegular';
font-weight: normal;
font-style: normal;
font-size: 1.75em;
text-align: center;
padding: 5px 0 0 0;
text-align: center;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
text-decoration: none;
}
.ca-menu li:hover .ca-main{
color: #ffffff;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
font-size: 1.75em;
padding: 5px 0 0 0;
margin: 0;
}
但是,当我在移动版中测试它时,链接一直在跳动。我不希望链接跳起来或类似的东西,但我无法修复它!我需要做什么来修复它?
最佳答案
问题出在移动版本的 .ca-main 中。你没有设置“margin: 0”,因为它是一个 H3,它已经有一个 margin。因此,当您将鼠标悬停在 li 上时,边距会被移除,您会得到“跳跃”效果。它与过渡或动画无关。
顺便说一句,您在 custom.js 的第 14 行遇到语法错误。
关于wordpress - 如何取消响应式网站页脚菜单中的 CSS 效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21397049/