CSS悬停仅适用于我的按钮的上半部分

Question

在这件事上我真的抓狂了。我不是专业的或者经常做网页的，我真的被难住了。

您可以在此处访问我的正在进行的工作页面：

http://damienivan.com/wip/042/

如果您将鼠标悬停在“特色作品”下面的某个按钮上，则只有当您的光标位于该按钮的上半部分时，才会显示悬停状态和“链接手指”。

CSS是：

    .work_button    
        {
        width:              174px;
        height:             58px;
        float:              left;
        background:         #3FC0E9;
        border-right:       4px solid #30A9D0;
        }

    .work_button:hover
        {
        background:         #FFF;
        color:              #30A9D0;
        }

HTML是：

<a href="demo_reel.html" target="video_player">
    <div class="work_button">
        <h2>demo reel</h2>
    </div>
</a>

完整的CSS文件位于：

http://damienivan.com/wip/stylesheets/main.css

提前感谢！我真的被困在这里了。

-Damien

Answer 1

问题是你的#work_wrapper目录有一个固定的高度(不好的主意)。删除该高度，并将其设置为overflow: hidden，以便它围绕按钮：

#work_wrapper {
width: 890px;
height: 100px;    /*  REMOVE THIS  */
padding-top: 14px;
position: relative;
overflow: hidden;  /*  ADD THIS  */
}

另外，你不应该在你的链接中使用div和h2。将它们剥离出来，然后执行以下操作：

HTML：

<a href="demo_reel.html" target="video_player">demo reel</a>

CSS：

#work_button_wrapper a {
  display: block;
  float: left;
  width: 174px;
  text-align: center;
  line-height: 58px;
  background: #3FC0E9;
  font-size: 1.25em;
}

#work_button_wrapper a:hover {
  background: white;
  color: #3FC0E9;
}

Answer 2

试着增加你work_wrapper的高度

试试这个：

#work_wrapper {
    height: 125px;
    padding-top: 14px;
    position: relative;
    width: 890px;
}

或者你也可以试试这个

#footer_wrapper { clear: both; }

Answer 3

此css语句可以帮助您：

 #footer_wrapper { clear: both; }

顺便说一句:将div嵌套到锚标签中是无效的。