CODEWITHSUNDEEP
css
user1902133
user1902133

Reputation: 73

CSS button hover/link only when you hover on the top of it

http://justxp.plutohost.net/gxx/

Try hovering the buttons.

The hover / link will only work if you hover on the head of the buttons. Why is this happening?

This is the code:

    <a href="#">
        <div class="button-1">
            <span class="bebas">play</span>
        </div>
    </a>
    <a href="#">
        <div class="button-1">
            <span class="bebas">community</span>
        </div>
    </a>
    <a href="#">
        <div class="button-1">
            <span class="bebas">account help</span>
        </div>
    </a>

css

   .button-1 {
   background-image: url("../img/buttonoff.png");
   background-repeat: no-repeat;
width: 302px;
height: 82px;
margin-left: 1.4%;
margin-top: 1%;
float: left;
text-align: center;
line-height: 90px;
-webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
}
.button-1:hover {
background-image: url("../img/buttonon.png");
background-repeat: no-repeat;
width: 302px;
height: 82px;
-webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
}

I see nothing wrong with that? I tried making the height bigger, still doesn't work.

I'm very curious about this!

Upvotes: 0

Views: 278

Answers (2)

Romain
Romain

Reputation: 455

You need to add a margin on your class news:

.news {
    position: relative;
    top: 5%;
    margin-top: 65px;
}

Edit:

Bonus! Please use css3 background gradients instead of images on background of your buttons.

gradients.glrzad.com

Hope this helps, sorry if I miss interfered.

Upvotes: 1

Jai
Jai

Reputation: 74738

Your this div is overlayering the buttons

<div class="news">

what you can do is :

Either you add this:

<br clear="all"/> //<---add this just above the div class named "news"

or you can adjust your css for the div class news:

.news {
   position: relative;
   top: 24%;
 }

Upvotes: 0

Related Questions