CSS :Hover; Why only the area of text gets ":hover"(gets black); why not the whole "padding area"?

[AsadullahMuhammadzai]

[JeremyLT]

Please post your actual code instead of a picture.

Also, please put your questions in the post body instead of the title.

Thanks.

[lasjorg]

That is the size of the element. It sounds like you want it on the container (the li element).

[AsadullahMuhammadzai]

yes this is the size of the element, means the hover effects just the element size. the problem is, why not the whole area of the padding along with the element get hover?
how can i hove an element along with its padding area.?
Thank you so much for your respond.

[lasjorg]

I don’t know what you mean. I can’t see any padding on the a element in the code you posted. Which again should be posted as code and not an image. Without knowing what the rest of the code looks like we can’t really help. Please post a live example on Codepen.

If you give the a element padding it will use whatever background color you give to the element. But it may depend on the display type of the element and its container. You can set the a element to display: block and see if that helps.

[AsadullahMuhammadzai]

@lasjorg Thank you so much for your response, and sorry for getting back too late.
The problem was:

<li class="active"><a href="">Home</a></li>

my problem was with the “a:hover”. when i bring cursor over “li”. it should be “hover the whole element area”. and it did not hover the whole area but just the area of “text” because i should needed to put anchor “a” tag with the same padding as “li” have.
Now Its been cleared.
But I highly appreciate your kind assistance.

[ilenia]

Or you can do li:hover as selector if you want that to be the one to change color