Jquery expanding the hover area

This is my my result html

Output http://img2.pict.com/fc/c7/94/3241379/0/20100328195141.png

And html of it is like this

<li id="33">
    <div class="todoRow">
        <span class="status_1">Test13</span>
        <img class="delete_todo" alt="Delete" src="trash.png">
    </div>
</li>

I am using toggleClass to change the cla开发者_开发百科ss of span on hover. I want to make it hover-able till the width of delete icon so I can toggle the class

I dont want to use div to trigger the hover because in that case when trash icon is hovered it toggles class of span element too.

The problem is the span doesn't actually go that far (because it's not a block element), you can see this by applying a border to it. To fix this, give your span a CSS rule, something like:

.todoRow span { display: inline-block; width: 160px; }

Of course, adjust the width as needed.