Hover over list CSS

[stefanmz]

Hey,so I couldn't find a solution for this. How do you hover over a list item that has a custom image in front of it(list-style-image) but you hover over not only the text but the whole list item together with the image. Like if you have bullets or checkmarks when you hover it hovers not only over the text but also over the checkmarks over the hole list item.

nav li:hover{
    background: rgba(255,0,0,255);
    /*margin: 10px;* this hovers only over the text of the list item/
  

 

[C2dan88]

Hover activates over the entire li element. Even if you put your mouseover the bullet/list-style-image. The hover state is not constrained to just the text.

 

Can you give a illustration of what you are trying to do.

[stefanmz]

hmm well with me the bullet or checkmark wasn't in the hover only the text,weird. I solved it by putting the checkmark inside the box like list-style-position:inside and then it worked Can you show me how you do it without using that since that was kinda hacky and I want to know if there is an easier way,can you also show me an illustration of how it works for you? There is no point of me showing you since I already solved it but if you could show me that would be great.

[C2dan88]

Looks like you solved your problem.

[stefanmz]

56 minutes ago, C2dan88 said:

Looks like you solved your problem.

well yeah I will mark it as solved. It works now I just had to reposition everything because once it went inside the box everything was all over the place but with some positioning I fixed it