CSS hover Only Works On The Top Half of My Button

Question

I'm really pulling my hair out on this one. I don't do webpages professionally or on a regular basis; and I'm really stumped.

You can go to my work-in-progress page here:

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

If you hover over one of the buttons below "featured work," the hover state and "link finger" only appear if your cursor is over the top half of the button.

The CSS is:

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

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

The HTML is:

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

The full CSS file is at:

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

Thanks in advance! I'm really stuck here.

-Damien

Answer 1

Try to increase height of your work_wrapper

Try this:

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

Or You can also try this

#footer_wrapper { clear: both; }

Answer 2

The problem is that your #work_wrapper div has a fixed height (bad idea). Remove that height, and instead set it to overflow: hidden so that it wraps around your buttons:

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

Also, you shouldn't really be using a div and h2 inside your links. Strip them out, and do this instead:

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 3

This css statement can help you:

 #footer_wrapper { clear: both; }

BTW: Nesting a div into an anchor tag ist not valid.

Answer 4

Use Google Chrome or Mozilla Firefox to debug your web-page. Both browsers have an option to use the webdeveloper tools, which will allow you to visualize the CSS better. This will help you actually see what is happening, and in this case, there is a cssobject blocking half of your button. A great plus in this in Firefox is that it has a 3D-view option. It looks geeky at first, but it can be REALLY helpful when trying to view what is going on in the CSS.

Answer 5

The problem is the footer of your page. It's above the buttons.

Give the buttons a z-index and it will work great!

You can always give your footer a z-index:-1;

Buttons will be shown on top and have a hover on the whole button

Answer 6

You're mixin inline and block elements. Inspect the H2 and you see the clickable elements ends there.

Refactored HTML below:

<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/

Answer 7

Move a tag inside the div and add width and height for a tag (Already you are giving height and width for the div which is covering the a tag so there is no wrong in giving the same height and width to the 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

Answer 8

I had same problem. For me a parent div had position:fixed and was invisibly above the button, which was difficult to pinpoint.