Question

我有兴趣将我网站上的悬停按钮点击，但不知道如何。我的网站在这里：http://mathisbeauty.org/

页面本身的相关代码如下所示

<div id="bar">
    <div class="menuLink"><a href="index.html">Home</a></div>
    <div class="menuLink"><a href="videos.html">Videos</a></div>
    <div class="menuLink"><a href="articles.html">Articles</a></div>
    <div class="menuLink"><a href="links.html">Links</a></div>
    <div class="menuLink"><a href="aboutme.html">About me</a></div>
</div>

和CCS是（我相信！）

.menuLink
{
    height:36px;
    width: 120px;
    text-align:center;
    float:left;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#252F33;
    padding-top:19px;
}
menuLink:hover
{
background: url(bar2.png) repeat-x;
}

任何帮助都非常感激。

Answer 1

您的代码是对的，但这就是您要找的内容？

http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/

Answer 2

您的链接是可点击的，问题是它只是当前链接的文本。您只需要使锚点与.menuLink中的容器大小相同。

添加以下css，它应该可以工作..

.menuLink a {
    height: 36px;
    width: 120px;
    display: block;
}

修改

请改用它，应该给你完整的方框。说实话，我没有注意到上半部分没有被包括在内。

.menuLink a {
    height: 57px;
    width: 120px;
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 18px;
}

Answer 3

我想你想让整个悬停区域成为一个链接元素。

你必须包装 <div class="menuLink">元素到<a>标记：

这也有效：

<a class="menuLink" href="index.html"><span>Home</span></a>

Answer 4

 .menuLink a {display: block;padding: 21px 0; }
.menuLink {padding:0;}

这会将a的宽度设置为与父div [{1}}匹配。

制作按钮链接

4 个答案: