Question

HTML code：

<div id="but_2" class="button">
    <a href="portfolio.html">Portfolio</a>
</div>
<div id="but_1" class="button"><a href="index.html">Home</a></div>

CSS代码：

.button {
    background-color: #ff0000;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
#but_1 {
    position: absolute;
    right: 50px;
    top:20px;
}

我的css按钮不起作用，它将我带到我需要的位置，但它是蓝色的并加下划线（按钮中的文字）我没有文字装饰，但它仍然不会消失。

Answer 1

定位document.getElementById('number'+i).value元素以删除下划线并更改颜色。您可以使用a

进行定位

＆＃13;

.button a {}

＆＃13;

.button {
  background-color: #ff0000;
  border: none;
  padding: 15px 32px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

#but_1 {
  position: absolute;
  right: 50px;
  top: 20px;
}

.button a {
  text-decoration: none;
  color: white;
}

＆＃13;

Answer 2

您需要更具体，并以href属性为目标。

例如：

 .button a {
    text-decoration: none;
    color: #000;
 }

https://jsfiddle.net/xojev64e/

Answer 3

a {text-decoration: none; color:#FF0000;}      shows unvisited link 
a:visited {color:#FF0000;}  shows visited link 
a:hover {color:#FF0000;}  shows mouse over link
a:active {color:#FF0000;}  show selected link

使用所有属性来定义颜色

Answer 4

我认为您还没有清除浏览器的浏览历史记录。首先清除历史记录，会话或cookie，然后执行以下步骤。

将以下内容添加到您的css文件

.button a {
  text-decoration: none;
  color: white;
}

并添加此功能以便在鼠标悬停时获得更多吸引力

.button a:hover {
    text-decoration: none;
    color: black;
}

希望这会对你有所帮助.. :)

Answer 5

将此添加到您的CSS：

/*Makes links in a button look like normal text*/
.button a[href]{
    color: black;
    text-decoration: none;
}

您还可以删除<a>标记并添加到代码中：

<div class='button' onclick="window.location = 'url'">Text</div>

我的按钮无效

5 个答案: