Question

这是我第一次使用框架，我正在使用zurbs Foundation 5框架。

我试图扩展/覆盖默认的.button类，并将其用作我的主按钮。下面是我的custom.css文件的css，它覆盖默认的Foundation 5样式：

CSS样式

.button {
font-family: 'Alegreya Sans','Helvetica Neue',Helvetica sans-serif;
background: rgb(238, 77, 13);
color: rgb(241, 227, 186);
border-radius: 30px;
padding: 10px 15px;
font-size: 80%;
margin-top: 10px;
}

.button:hover{
background: #46A18C;
}

相应的HTML元素：

<p>This is a description of the thing in the thing</p>
<a class="button" href="#">View Project</a>

我似乎遇到的问题仅在webkit浏览器（safari / chrome）中很明显，其中一切都在加载时完美运行。只有在您单击链接后才会出现此问题，现在所有链接都设置为href =“＃”。单击链接后，每个按钮内的文本将消失，仅在悬停时重新显示。不确定它是否相关，但此链接的基础样式还包括transition属性设置为background-color 300ms ease-out 0s

您可以在此处查看示例：http://www.kashmachine.ca/build

我不确定是什么造成的，我通过萤火虫经历了它，禁用了1×1的样式，但似乎没有什么能解决它。任何/所有建议都很棒。我对网络开发有点新意，但这确实让我很难过。再次感谢您的帮助。

Answer 1

您

a, a:visited {
color:#EE4D0D;
text-decoration:none;
}

与按钮的背景颜色相同..

按照以下方式解决您的按钮：

a.button

所以：

a.button {
font-family: 'Alegreya Sans','Helvetica Neue',Helvetica sans-serif;
background: rgb(238, 77, 13);
color: rgb(241, 227, 186);
border-radius: 30px;
padding: 10px 15px;
font-size: 80%;
margin-top: 10px;
}

a.button:hover{
background: #46A18C;
}

应该覆盖它..

单击事件后基础5按钮类中断（在webkit浏览器中）

1 个答案: