CODEWITHSUNDEEP
csshtml-lists
Entimon
Entimon

Reputation: 184

<li> mouse hover background

I have a code like this. But the background, that changes, doesn't touches the left border of the div. How can I do this without changing the position of the text ('Element 1')?

CSS: 

    li{
        list-style-type: none;
    }
    li:hover{
        background: green;
    }

HTML:

<div style="border: 1px solid black; width: 200px;">
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </ul>
</div>

http://jsfiddle.net/F698P/

Upvotes: 0

Views: 42

Answers (2)

Mad Angle
Mad Angle

Reputation: 2330

Set padding of ul to 0px. 

<style>
    ul {
        padding: 0;
    }
    li {
        list-style-type: none;
        padding-left: 65px;
    }
    li:hover {
        background: green;
    }
</style>

Upvotes: 2

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

By removing the margin of the li and adding some padding to it.

li{
    list-style-type: none;
    margin-left: 0; /* assuming it had 10px margin first */
    padding-left: 10px; /* more padding */
}
li:hover{
    background: green;
}

The only thing that was not allowing it to have background color at the left side was the extra margin. You can also check for the ul properties for padding too. It is just an extra spacing.

ul was the problem

Ul was also having margin as I said,

so here is the updated fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/F698P/1/

The CSS added was

ul {
    padding: 0;
}

You can add more padding for the li element to make the text go back to where it had to go.

Upvotes: 2

Related Questions