Question

我使用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，但不确定要放在那里的代码。

Answer 1

对这些规则添加：

display:block;

将按钮设为SPAN（W3C正确）并用如下标签围绕它：

<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。

Answer 2

#bluebutton1 a{display:block;}

如何使CSS按钮可单击

2 个答案: