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

时间:2013-05-27 11:08:43

标签: html css button web hover

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

您可以在此处转到我的工作进度页面:

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

8 个答案:

答案 0 :(得分:3)

尝试增加work_wrapper的高度

试试这个:

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

或者 你也可以尝试这个

#footer_wrapper { clear: both; }

答案 1 :(得分:2)

问题是你的#work_wrapper div有一个固定的高度(糟糕的主意)。移除该高度,然后将其设置为overflow: hidden,以便它包裹您的按钮:

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

此外,您不应该在链接中使用divh2。剥去它们,然后改为:

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;
}

答案 2 :(得分:1)

此css声明可以帮助您:

 #footer_wrapper { clear: both; }

顺便说一句:将div嵌入锚标记是无效的。

答案 3 :(得分:1)

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

答案 4 :(得分:0)

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

给按钮一个z-index,它会很棒!

您总是可以给页脚z-index:-1;

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

答案 5 :(得分:0)

您正在混合内联和块元素。检查H2,你会看到可点击的元素在那里结束。

enter image description here

下面重构的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/

答案 6 :(得分:0)

a tag内移动div并添加标记的宽度和高度(已经为覆盖标记的div提供height and width,因此给出了没有错误与height

相同的widtha 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

答案 7 :(得分:0)

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