CSS hover 仅适用于我的按钮的上半部分答案

【问题标题】：CSS hover Only Works On The Top Half of My ButtonCSS hover 仅适用于我的按钮的上半部分
【发布时间】：2013-05-22 05:33:42
【问题描述】：

我真的把头发拉出来了。我不专业地或定期地做网页；我真的很难过。

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

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

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

-达米恩

【问题讨论】：

如果你有这样的问题，你应该先检查浏览器的开发工具。你在那里，例如有一个工具可以显示当前鼠标位置下的元素，在那里你可以看到你的footer 覆盖了菜单。
天哪，现在我觉得自己真的很笨！谢谢！

标签： html css button web hover

【解决方案1】：

我有同样的问题。对我来说，父 div 的 position:fixed 并且在按钮上方是不可见的，这很难确定。

【讨论】：

【解决方案2】：

在div 内移动a tag 并为标签添加宽度和高度（您已经为覆盖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;
        }

DEMO

【讨论】：

【解决方案3】：

尝试增加 work_wrapper 的高度

试试这个：

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

或者你也可以试试这个

#footer_wrapper { clear: both; }

【讨论】：

完美答案，我在寻找什么
@Romancha 最糟糕的解决方案，因为它没有消除最初的问题。
它解决了问题，可能是静态方式但它解决了。
增加身高不是一个好主意。根本不要使用高度，而是overflow: hidden（见我的回答）。
第一名是身高，我给了一个快速修复 btw @ralph.m 你的答案很酷

【解决方案4】：

问题是你的#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;
}

【讨论】：

【解决方案5】：

问题在于页面的页脚。它在按钮上方。

给按钮一个 z-index，它会很好用！

您可以随时给您的页脚添加z-index:-1;

按钮将显示在顶部并悬停在整个按钮上

【讨论】：

【解决方案6】：

您正在混合内联元素和块元素。检查 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;;
    }

http://jsfiddle.net/brutusmaximus/ZPunN/

【讨论】：

【解决方案7】：

使用 Google Chrome 或 Mozilla Firefox 来调试您的网页。两种浏览器都可以选择使用 webdeveloper 工具，这将使您可以更好地可视化 CSS。这将帮助您真正了解正在发生的事情，在这种情况下，有一个 cssobject 阻塞了您的按钮的一半。 Firefox 的一大优点是它有一个 3D 视图选项。起初它看起来很怪异，但在尝试查看 CSS 中发生的事情时，它真的很有帮助。

【讨论】：

对于 Firefox，我建议使用 Firebug 扩展而不是内置的 webdev 工具。
绝对是！！！ Firebug 扩展确实是一个很棒的工具，您只需安装！但是我在这里提到的 3D 选项不是 Firebug 的一部分，而是 Firefox 本身的：developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view
不知道那个。这可能会派上用场。唉，我的显卡好像不行。
是的，你是对的，谢谢。通常我会这样做，我想我只是想不直，哈哈。

【解决方案8】：

这个 css 语句可以帮助你：

 #footer_wrapper { clear: both; }

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

【讨论】：

对于给定的doctype，您是对的，但是对于 html5，将 div 放入 a 内是有效的
真的！感谢您的补充。（但我猜只是为了一个标签？）
@t.niese 你能提供一个链接来证明你的陈述吗？我认为他们没有理由改变机制以禁止内联元素中的块元素。
@Christoph 它不再是 inline 而是 transparent dev.w3.org/html5/markup/a.html Changes in HTML5 [...] a 元素的实例现在也允许包含 flow 内容（本质上，在以前的版本中称为 “块” 内容）——如果父元素该 a 元素的实例是允许包含 flow 内容的元素。 [...]
@t.niese 感谢您的链接。但是流内容！=块元素。我发现 html5 的区别相当不直观。基本上块元素将是流 - 措辞内容...... -_-