Question

要应用哪些css样式，使按钮的可点击区域达到按钮的确切形状。请您告诉我

Answer 1

如果你使用HTML，你必须使用一种过时的技术 - Image maps - 来获得一个不是正方形形状的可点击区域。如果您使用Flash，则有更多选项。这个回复解决了版本4的HTML / XHTML，我还没有阅读HTML 5的规范，可能有更多方法可以解决这个问题（可能与Javascript结合使用）。

Answer 2

如果我希望在菜单中设置样式链接，我会使用无序列表。您需要使用display：block来使整个列表项可单击。我在下面包含了示例css和html。

在我的样式表中：

#menu {
width: 800px;
height: 40px;
}

#menu ul {
list-style-type: none;
margin:0;
padding:0;
}

#menu li {
display: inline;
margin-right: 10px;
float: left;
background-color: #FC0;
}

#menu a {
text-decoration: none;
font-size: 1.2em;
color: #006;
display:block;
padding: 5px 10px 5px 10px;
}

#menu a:hover,
#menu a:active {
color: #009;
background-color: #F90;
}

在我的HTML中：

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Articles</a></li>
    </ul>
</div>

这将为您提供三个黄色框/按钮的水平菜单，在悬停时将变为橙色。 a显示为一个块，因此当鼠标悬停在黄色框内的任何位置而不是仅仅悬停在文本上时，悬停效果会生效。

希望这会有所帮助：o）

按钮可点击区域

2 个答案: