如何使CSS按钮可点击 [英] How Do I Make a CSS Button Clickable

问题描述

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

I've made my own buttons using 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;
}

还有一些文字。

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

Right now, only the text is clickable.

我想让我的整个按钮可点击，即当用户悬停在按钮的任何部分，而不仅仅是文本。任何人都知道如何做到这一点？我想我必须使用＃bluebutton1：hover，但不知道要放在哪里的代码。

I want to make my whole button clickable, i.e. when the user hovers over any part of the button, not just the text. Anyone know how to do that? I'm guessing I have to work with #bluebutton1:hover, but not sure what code to put in there.

推荐答案

这些规则添加了：

display:block;

使按钮成为SPAN（W3C正确），并用a标签包围它：

Make the button a SPAN (to be W3C correct) and surround it with the a tag like this:

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

然后整个按钮可以点击 - 不只是里面的文字。

Then the entire button will be clickable - not just the text inside.

此外，由于这是一个按钮和按钮是很多（可能）。这将是一个好主意，使你的CSS规则类：

Also, since this is a button and buttons are a lot (might be). It would be a good idea to make your CSS rule a class:

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

这样，您可以在页面上创建更多的此类按钮。

This way you can make more buttons of this kind on the page.

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

The :hover pseudo element is used to change how the button looks when you hover it with the mouse. You can use:

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

这会将按钮的背景颜色改变为红色，老鼠。使用：hover伪元素输入的任何规则将在悬停时应用于按钮，并将覆盖上一个声明中的原始规则。

Which would change the background color of the button to red when hovering it with the mouse. Any rules you enter using the :hover pseudo element will be applied to the button when hovering it and will override the original rules in the previous declaration.

UPDATE：

更改页面中的代码：

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

In order to make an entire element clickable you surround it with the A tag. And since due to standarts DIV elements should never be inside an A tag, you have to change the div to span.

这篇关于如何使CSS按钮可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！