我真的把头发拉出来了。我不专业或定期做网页;而且我真的很难过。
您可以在此处访问我的工作进度页面：
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
问题是你的#work_wrapper div有一个固定的高度（糟糕的主意）。删除该高度，然后将其设置为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;
}
尝试增加work_wrapper的高度
试试这个：
#work_wrapper {
height: 125px;
padding-top: 14px;
position: relative;
width: 890px;
}
或者您也可以试试这个
#footer_wrapper { clear: both; }
这个css语句可以帮助你：
#footer_wrapper { clear: both; }
顺便说一句：将div嵌入锚标记是无效的。
使用Google Chrome或Mozilla Firefox调试您的网页。两种浏览器都可以选择使用webdeveloper工具，这样可以更好地可视化CSS。这将帮助您实际查看正在发生的事情，在这种情况下，有一个cssobject阻止了一半的按钮。 Firefox中的一个很好的优点是它具有3D视图选项。一开始它看起来很怪异，但在尝试查看CSS中发生的事情时它确实非常有用。
你在内联和块元素混合。检查H2，您会看到可点击元素在那里结束。
下面重构的HTML：
<div id="work_button_wrapper">
<a href="demo_reel.html" class="work_button" target="video_player">
demo reel
</a>
<a href="hp.html" class="work_button" target="video_player">
hp
</a>
<a href="free_world.html" class="work_button" target="video_player">
free world
</a>
<a class="work_button" href="dabo.html" target="video_player">
dabo
</a>
<a class="work_button" href="sugar_skull.html" target="video_player" class="work_button work_button_last">
sugar skull
</a>
</div>
CSS：
body {
font: 17px/19px Helvetica, sans-serif;
color: #FFF;
}
#work_button_wrapper
{
width: 890px;
float: left;
padding-top: 9px;
overflow:hidden;
}
.work_button
{
width: 174px;
float: left;
overflow: hidden;
background: #3FC0E9;
border-right: 4px solid #30A9D0;
color: #fff;
text-decoration: none;
display: block;
font-size: 24px;
font-weight: normal;
letter-spacing: -1.5px;
text-align: center;
padding: 20px 10px;
}
.work_button:hover
{
background: #FFF;
color: #30A9D0;
}
.work_button_last
{
width: 178px;
border-right: 0px solid #30A9D0;;
}
问题是页面的页脚。它在按钮上方。
给按钮一个z-index，它会很棒！
你总是可以给你的页脚一个z-index:-1;
按钮将显示在顶部，并在整个按钮上悬停
在a tag中移动div并为标签添加宽度和高度（已经为覆盖a标签的div提供height and width，因此给height提供相同的width和a tag没有错）
#work_button_wrapper
{
width: 890px;
float: left;
padding-top: 9px;
/* border: 2px solid #FFF; */
}
.work_button
{
width: 174px;
height: 58px;
float: left;
background: #3FC0E9;
border-right: 4px solid #30A9D0;
text-align:center
}
.work_button a
{
text-decoration: none;
font-size: 15px;
color: #FFF;
height:58px;
width:174px
}
h2{
height:100%; width:100%
}
.work_button a:hover
{
background: #FFF;
color: #30A9D0;
}
.work_button_last
{
width: 178px;
border-right: 0px solid #30A9D0;;
}
#work_button_wrapper a:hover
{
/* background: #3FC0E9; */
background: #FFF;
color: #30A9D0;
}
.work_button:hover
{
background: #FFF;
color: #30A9D0;
}
我有同样的问题。对我来说，父级div有位置：固定并且无形地位于按钮上方，这很难确定。