1

我有兴趣使我的网站上的悬停按钮可点击，但不知道如何。我的网站在这里： 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;
}

非常感谢任何帮助。

4

4 回答 4

3

您的代码是正确的，但这就是您要找的吗？

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

于 2012-12-20T05:43:29.540 回答
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;
}
于 2012-12-20T05:42:43.563 回答
2

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

您必须将 <div class="menuLink">元素包装为<a>标记：

这也有效： 

<a class="menuLink" href="index.html"><span>Home</span></a>
于 2012-12-20T05:46:37.783 回答
0 
 .menuLink a {display: block;padding: 21px 0; }
.menuLink {padding:0;}

这将设置 div 的宽度a以匹配父 div .menuLink。

于 2012-12-20T05:48:01.850 回答