CODEWITHSUNDEEP
csshoverhtml-lists
Wolt
Wolt

Reputation: 3

CSS: Change background on hover of <li>, color not filling the space

I'm having issues with getting this code player in progress to look proper:

http://invigorateme.net/viperbox.html

When I hover over a list item (the list items are the four tabs on top), the background changes, but it doesn't fill the space for the two on the sides. I was trying to learn from another source code, but I just couldn't get the tweaking quite right, and am still having issues.

The Question: How can I make it so when you hover over a list item, the background changes and fits the background?

If you go to my site link, you'll see what I mean when you hover over one of these elements. It simply changes color, but not as I expected.

Here's the relevant CSS behind it, let me know if it's horrendous and what I can do better, I'm still learning:

    #codetabs{
        width: 197px;
        height: 30px;
        position: relative;
        top: 8px;
        background-color: white;
        border: 2px solid #B7B7B7;
        border-radius: 10px;
        margin: 0px auto;
        padding: 0;
        }

    #codetabs ul{
        height: 50px;
        position: relative;
        margin: 0px auto;
        padding-left: 5px;
        }

    #codetabs li{
        text-align: center;
        float: left;
        height: 23px;
        list-style: none;
        margin: 0px;
        padding: 7px 5px 0px 5px;
        border-right: 2px solid #B7B7B7;
        }

    #codetabs li:hover{
        background-color: grey;
        }

If anyone thinks I might have left out any important code or info, let me know that as well. I didn't believe the HTML was necessary.

Upvotes: 0

Views: 2051

Answers (2)

connexo
connexo

Reputation: 56744

This is the working CSS:

#codetabs{
    width: 197px;
    height: 30px;
    position: relative;
    top: 8px;
    background-color: white;
    margin: 0 auto;
    padding: 0;
}

#codetabs ul{
    height: 50px;
    position: relative;
    margin: 0 auto;
    padding-left: 5px;
}

#codetabs li{
    text-align: center;
    float: left;
    height: 23px;
    list-style: none;
    margin: 0;
    padding: 7px 5px 0px 5px;
    border-width: 2px 2px 2px 0;
    border-color: #B7B7B7;
    border-style: solid;
}

#codetabs ul :first-child {
    border-radius: 10px 0 0 10px;
    border-left-width: 2px;
}
#codetabs ul :last-child {
    border-radius: 0 10px 10px 0;
}
#codetabs li:hover{
    background-color: grey;
}

http://jsfiddle.net/d09xgfzc/1/

Upvotes: 0

Dan Truitt
Dan Truitt

Reputation: 107

Basically your problem is that your list items are all rectangles that are contained in a pill shaped box (id="codetabs"). If you want the background color to fill each button, you're going to need to use some pseudo classes (:first-child and :last-child) to specify border radius values on your first and last li items.

Upvotes: 1

Related Questions