Html 样式单选按钮，需要在保持样式的同时单击链接_Html_Css

Html 样式单选按钮，需要在保持样式的同时单击链接

html css

Html 样式单选按钮，需要在保持样式的同时单击链接,html,css,Html,Css,我使用风格的单选按钮作为一个简单的导航的东西。我只需要知道如何让它们链接到一些东西，同时保持我应用的样式在下面的代码中，“主页”按钮链接到某个对象，但不再具有单选按钮的属性如何在链接时保持“悬停”和“单击”样式 <!DOCTYPE html> <html> <head> <style> .navText { font-family: helvetica, sans-serif; font-size: 15px; font-weight: 400

我使用风格的单选按钮作为一个简单的导航的东西。我只需要知道如何让它们链接到一些东西，同时保持我应用的样式

在下面的代码中，“主页”按钮链接到某个对象，但不再具有单选按钮的属性

如何在链接时保持“悬停”和“单击”样式

<!DOCTYPE html>
<html>
<head>
<style>
.navText {
font-family: helvetica, sans-serif;
font-size: 15px;
font-weight: 400;
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
input[type=radio] {
display: none;
}
.overlay {
display: inline-block;
position: relative;
float: left;
width: 100px;
height: 50px;
margin-left: 5px;
display: table;
background-color: grey;
}
input[type=radio]:hover + .overlay {
background-color: red;
}
input[type=radio]:checked + .overlay {
background-color: red;
}
</style>
</head>
<body>

<label><input type="radio" name="nav"><a href="#"><span class="overlay"><h1 class="navText">Home</h1></span></a></label>
<label><input type="radio" name="nav"><span class="overlay"><h1 class="navText">Postings</h1></span></label>
<label><input type="radio" name="nav"><span class="overlay"><h1 class="navText">About</h1></span></label>
<label><input type="radio" name="nav"><span class="overlay"><h1 class="navText">Contact</h1></span></label>
<label><input type="radio" name="nav"><span class="overlay"><h1 class="navText">Other</h1></span></label>

</body>
</html>


.navText{
字体系列：helvetica，无衬线；
字体大小：15px；
字体大小：400；
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
颜色：白色；
}
输入[类型=收音机]{
显示：无；
}
.覆盖{
显示：内联块；
位置：相对位置；
浮动：左；
宽度：100px；
高度：50px；
左边距：5px；
显示：表格；
背景颜色：灰色；
}
输入[类型=无线电]：悬停+叠加{
背景色：红色；
}
输入[类型=无线电]：选中+叠加{
背景色：红色；
}
张贴
关于
接触
其他

而不是使用锚（


<label>
    <input type="radio" name="nav" onclick="document.location='#';">
    <span class="overlay">
        <h1 class="navText">Home</h1>
    </span>
</label>