3

我使用 CSS 制作了自己的按钮：

#bluebutton1 {
    position: absolute;
    top: 327px;
    left: 650px;
    height: 70px;
    width: 120px;
    border:2px solid #6495ED;
    background-color: #BCD2EE;
    border-radius: 40px;
    padding-top: 7px;
}

里面有一些文字。

现在，只有文本是可点击的。

我想让我的整个按钮可点击，即当用户将鼠标悬停在按钮的任何部分上时，而不仅仅是文本。有谁知道该怎么做？我猜我必须使用#bluebutton1:hover，但不确定要放什么代码。

4

2 回答 2

5

在这些规则中添加：

display:block;

将按钮设为 SPAN（要符合 W3C 标准）并用 a 标签将其包围，如下所示：

<a href="http://your-website-here.com"><span id="bluebutton1">Text in the button</span></a>

然后整个按钮将是可点击的——不仅仅是里面的文本。

此外，由于这是一个按钮，而且按钮很多（可能是）。将 CSS 规则设为一个类是个好主意：

  .bluebutton1 {
    position: absolute;
    top: 327px;
    left: 650px;
    height: 70px;
    width: 120px;
    border:2px solid #6495ED;
    background-color: #BCD2EE;
    border-radius: 40px;
    padding-top: 7px;
    display:block;
  }

并像这样使用它：

<a href="http://your-website-here.com"><span class="bluebutton1">Text in the button</span></a>

这样，您可以在页面上制作更多此类按钮。

:hover 伪元素用于更改按钮在鼠标悬停时的外观。您可以使用：

.bluebutton:hover {
  background-color:red;
}

当用鼠标悬停按钮时，它会将按钮的背景颜色更改为红色。您使用 :hover 伪元素输入的任何规则都将在悬停按钮时应用于按钮，并将覆盖先前声明中的原始规则。

更新：

从此更改页面中的代码：

<div id="bluebutton1">
        <p><a href="jerry.pancakeapps.com/Resume.pdf">Check out my <span style="color:red; font-family:Verdana; font-size:14px" id="link1"><strong>Resume</strong></span>!</a></p><br>
        </div>

对此：

<a href="jerry.pancakeapps.com/Resume.pdf" style="display: block;">
    <span id="bluebutton1">
        <p>
            Check out my
                <span style="color:red; font-family:Verdana; font-size:14px" id="link1">
                    <strong>Resume</strong>
                </span>!
        </p>
        <br>
    </span>
</a>

为了使整个元素可点击，您可以用 A 标记将其包围。而且由于标准 DIV 元素不应该在 A 标签内，因此您必须将 div 更改为 span。

于 2013-07-08T15:13:14.990 回答
1 
#bluebutton1 a{display:block;}
于 2013-07-08T15:07:02.913 回答