如何使 CSS 按钮可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17530022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Do I Make a CSS Button Clickable
提问by blahblahblahblah
I've made my own buttons using CSS:
我使用 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;
}
And there's some text in it.
里面有一些文字。
Right now, only the text is clickable.
现在，只有文本是可点击的。
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.
我想让我的整个按钮可点击，即当用户将鼠标悬停在按钮的任何部分时，而不仅仅是文本。有谁知道怎么做？我猜我必须使用#bluebutton1:hover，但不确定要放入什么代码。
回答by DreamWave
to those rules add this:
在这些规则中添加以下内容：
display:block;
Make the button a SPAN (to be W3C correct) and surround it with the a tag like this:
使按钮成为 SPAN（W3C 正确）并用 a 标签包围它，如下所示：
<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.
然后整个按钮将是可点击的——不仅仅是里面的文本。
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:
此外，由于这是一个按钮，而且按钮很多（可能是）。让你的 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;
}
and use it like this:
并像这样使用它：
<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.
通过这种方式，您可以在页面上制作更多此类按钮。
The :hover pseudo element is used to change how the button looks when you hover it with the mouse. You can use:
:hover 伪元素用于更改鼠标悬停按钮时的外观。您可以使用：
.bluebutton:hover {
background-color:red;
}
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.
当用鼠标悬停按钮时，这会将按钮的背景颜色更改为红色。您使用 :hover 伪元素输入的任何规则将在悬停按钮时应用于按钮，并将覆盖先前声明中的原始规则。
UPDATE:
更新：
Change the code in your page from this:
从此更改页面中的代码：
<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>
To this:
对此：
<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>
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.
为了使整个元素可点击，您可以用 A 标签将其包围。由于标准 DIV 元素永远不应位于 A 标记内，因此您必须将 div 更改为 span。
回答by Abdul Malik
#bluebutton1 a{display:block;}
