eg. [I've removed attributes, but it's a bit of auto-generated html]

<img class="p"/>
    <div> hello world
      <p>
        <font><font size="2">text.<img class="p"/>
        some text</font></font>
      </p>
      <img class="p"/>
      <p> <font><font size="2">more text<img class="p"/>
        another piece of text
        </font></font>
      </p><img class="p"/> some text on the end
    </div>

I need to apply some highlighting with backgrounds to all text that is between two closest [in the html code] img.p elements when hovering first of them. I have no idea how to do that. Lets say I hover the first img.p - it should highlight hello world and text. and nothing else.

And now the worst part - I need the backgrounds to disappear on mouseleave.

I need it to work with any HTML mess possible. The above is just an example and structure of the documents will differ.

[tip. Processing the whole html before binding hover and putting some spans etc. is ok as long as it doesn't change the looks of the output document]