文章/答案/技术大牛

发布

社区首页 >问答首页 >具有悬停效果的导航按钮

问具有悬停效果的导航按钮
EN

Stack Overflow用户

提问于 2012-11-30 05:02:06

回答 1查看 662关注 0票数 0

我想复制这个页面上的按钮样式http://oakespavers.com/ (左手边)与相同的悬停效果。每次我尝试时，只有方框中的文本受到影响。我想让整个div在鼠标悬停时改变颜色，并保持代码非常简单。

css

button

navigation

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-11-30 05:14:13

这可能会做到这点：

HTML：

<a href="#">Home</a>
<a href="#">Our Blog</a>
<a href="#">Contact US</a>

CSS：

a {
    border-radius: 5px;
    font-weight: 600;
    text-align: left;
    font-family: "Verdana", "Geneva", "sans-serif";
    text-transform: none;
    letter-spacing: 0px;
    font-weight: bold;
    font-size: 12px;
    display: block;
    padding: 10px 20px;
    color: #666;
    background-color: #E1E1E1;
    text-decoration: none;
    width: 225px;
    margin: 5px;
}
a:hover {
    color: white;
    background-color: #75D039;
}

下面是一个包含示例的fiddle

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13634653

复制

相似问题

问具有悬停效果的导航按钮
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有悬停效果的导航按钮EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有悬停效果的导航按钮
EN