Question

代码：

<style>
    .RoundButton
    {
      text-align: center;
      text-decoration: none;
      font-size: 34px;
      width: 70px;
      height: 40px;
      background-color: #ffffff;
      border-radius: 15px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      border: 5px solid #000000;
      padding: 5px;
    }
    .RoundButton:link {color: #000000;}
    .RoundButton:visited {color: #000000;}
    .RoundButton:hover {color: #000000;border: 5px solid #ff0000;}
    .RoundButton:active {color: #000000; border: 5px solid #0000ff;}
</style>

然后我有一些HTML：

<center><a href="https://www.google.com" target="blank"><div class="RoundButton">Hi</div></a></center>

当我查看它时，它会显示默认的链接颜色，但圆形按钮会改变颜色作品。我看了W3Schools，他们的例子看起来像我的，但是很有效。帮助

Answer 1

请更具体地提出您的问题。你的造型有什么问题？

Answer 2

然后将.RoundButton：hover更改为：hover {}到你喜欢的地方。

Answer 3

HTML：

<div class="RoundButton"><a href="https://www.google.com" target="blank">Hi</a></div>

CSS

.RoundButton
{
  text-align: center;
  text-decoration: none;
  font-size: 34px;
  width: 70px;
  height: 40px;
  background-color: #ffffff;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border: 5px solid #000000;
  padding: 5px;
  margin:0 auto;
}
.RoundButton:hover {color: #000000;border: 5px solid #ff0000;}
.RoundButton:active {color: #000000; border: 5px solid #0000ff;}
a:link {color: #000000;}
a:visited {color: #000000;}

fiddle。

我使用margin:0 auto而不是<center>标记对div进行了居中，并调整了CSS。

CSS样式问题

3 个答案: