Jquery expanding the hover area

Question

Hello,

This is my my result html

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 class 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.

Answer 1

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.