Good afternoon, tell me, please, how can I solve the following problem.

There is a list of <li> , to each element of which you want to display a control option in the form of a button, clicking on which displays a different list (delete, hide, etc.).

As a “button” for displaying the second list, I use an image loaded as background: url(img.png) for each <li> element.

Problem - I can not get any access (for example, hover() ) to the image img.png (for changing the cursor and further processing the click). Is the problem of getting access to the background at all?

  • one
    $li.css('background', 'new-image.png'); . Now if you have it in :after , then there really I don’t know how to act not through css. In principle, all this needs to be done through :hover and :active , and there should be no problems. - etki

2 answers 2

You can interact only with HTML-elements , and not with their properties.
Here background-image is a property, and no matter how you click on the background image, the click will work exactly on the element that has this background image. Moreover, even there is no access to pseudo-elements. Therefore, either make the picture a separate element, or hang click on the whole <li>

    Alternatively, add a li div to your li which will have a background image and react to events related to that div