CODEWITHSUNDEEP
htmlcssbuttonhover
Damien Ivan
Damien Ivan

Reputation: 35

CSS hover Only Works On The Top Half of My Button

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

Upvotes: 3

Views: 13839

Answers (8)

edd
edd

Reputation: 1364

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

Upvotes: 3

Dan Kaiser
Dan Kaiser

Reputation: 1071

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

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

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

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

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

Upvotes: 2

Ryan de Vries
Ryan de Vries

Reputation: 686

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

Upvotes: 0

brutusmaximus86
brutusmaximus86

Reputation: 264

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

enter image description here

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/

Upvotes: 0

Borniet
Borniet

Reputation: 3546

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.

Upvotes: 1

Wipster
Wipster

Reputation: 1570

This css statement can help you:

 #footer_wrapper { clear: both; }

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

Upvotes: 1

Related Questions