CSS hover Only Works On The Top Half of My Button

css hover overlap
css hover shorthand
css hover behind
css hover on class
hover parent selector css
css hover inherit
css hover on div
css link hover effects

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

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

CSS hover Only Works On The Top Half of My Button, 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� These effects are based on CSS animation, transition, & basic commands. So, Today I am sharing CSS Button Hover Effects Pack. Yes, you can call this a pack because this has 13 different hover effects using HTML & CSS. There are many effects like swipe, slice, overlap, etc. You can place these effects not only on buttons, any element as you want

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

CSS hover Only Works On The Top Half of My Button, 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:� Collection of hand-picked free HTML and CSS button hover effect code examples. Update of September 2018 collection. 3 new items.

This css statement can help you:

 #footer_wrapper { clear: both; }

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

CSS :hover works only on the lower half of the button, CSS :hover works only on the lower half of the button - html. After hovering my image will be on top of other images. When i tested it for z-index 10 for 0% i had� In IE 6 and below, :hover used to only work on links, but in newer browsers it works on any element. This can be particularly useful for things like dropdown menus in which you can wait for the :hover of a parent list item and then reveal the next level of the nested menu. Careful though, hover effects should be coupled with some kind of action

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.

Hover on "Everything But", Whoops – my apolagies! Your demo goes even one level deeper, instead of the “ basic” form. Even better! Transition on Hover. CSS transitions allows you to change property values smoothly (from one value to another), over a given duration. Add a transition effect (opacity and background color) to a button on hover:

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/

Places it's tempting to use `display: none;`, but don't, var $button = $('#myButton'), $text = $('#myText'), visible = true; $button.click( function() { if (visible)� Definition and Usage. The :hover selector is used to select elements when you mouse over them.. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

CSS :hover works only on the lower half of the button, CSS hover Only Works On The Top Half of My Button, The problem is that your # work_wrapper div has a fixed height (bad idea). Remove that height, and� Some of the effects are quite, let's call them 'dramatic' and those effects may be suited for a page where you only have 1 button or just a few. The animations are very easy to customize since they are made out of just CSS. Let's get started explaining the sixth example. HTML Let's make the first button of the sixth example.

W3.CSS Reference, w3-panel, HTML container with 16px left and right padding and 16px top and bottom margin, Try it. Used to display w3-half, Half (1/2) screen column container, Try it For this class to work, the page content must be within a "w3- main" class, Try it w3-button, Rectangular button with grey background color on hover, Try it. You don’t need role="button" on <button> because they are already buttons, but if you’re going to make any other element button-like, you have more work to do to mimic the functionality. Plus, don’t forget about :hover and :focus styles! Once you’ve wrangled in the styles for the default state, this shouldn’t be so hard, but you

Documentation, <button class="myCoolButton">My Cool Button</button> To change the color of the pseudo-color on hover: auto; /* Center horizontally */ width: 60%; /* 60% width */ padding-bottom: 60%; /* 60% height */ } However, this only works with small children. Say that a child wants to be half of the size of its parent element. //Get the button: mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button

Comments
  • If you have such problems you should first check the dev tools of the browser. There you e.g. have a tool that shows you the element that is under the current mouse position and there you can see that your footer is overlaying the menu.
  • Oh geez, now I feel really dumb! Thank you!
  • Perfect Answer, what i am searching for
  • @Romancha worst solution because it does not remove the initial problem.
  • it solves the problem, may be in static manner but it solves.
  • Increasing thei height is not a good idea. Don't use height at all, but overflow: hidden (see my answer).
  • there was height on first place and i gave a quick fix btw @ralph.m your answer is cool
  • For the given doctype you are right, but with html5 it is valid to put a div inside an a
  • True! Thanks for the addition. (But I guess only for a tag?)
  • @t.niese can you please give a link to prove your statement? I see no reason why they should change the mechanics to disallow block elements inside inline-elements.
  • @Christoph it is not inline anymore but transparent dev.w3.org/html5/markup/a.html Changes in HTML5 [...] an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as "block" content) — if the parent element of that instance of the a element is an element that is allowed to contain flow content. [...]