CODEWITHSUNDEEP
jquerycssdombuttonjquery-hover
MauF
MauF

Reputation: 451

hovering svg icon over input is interrupted

I have the following html construction:

<span>
  <label>
    <input this is my button's area  />
    <span> this is the svg icon</span>
  </label>
</span>

I have a jQuery hover event affecting my input and the span is absolutely positioned within the input area, so it is visually above it.

The hover event changes the input class so I can change the button color, but when the mouse moves over the span that contains the icon, the hover class in the input, switches off, predictably, and the button appears not to be active.

Is there a way in which I can make the hover event to persist, eventhough I hover the sibling span without rearranging the DOM?

Upvotes: 3

Views: 277

Answers (2)

MauF
MauF

Reputation: 451

what eneded up working for me, was incluiding a new sibling div, absolutely positioned on top of the input. just that, hover works great and, best of all, click events were not affected.

thank you all for helping me brainstorm.

UPDATE: still having some problems: the hover, in IE, only works when mouse is over the button's border (!!). when you hover over the absolutely positioned div or the input, the hover event is cancelled. any ideas, please? I cannot find a logical explanation.

(remember to open this link in IE to replicate issue and in chrome/ff to view the expected behaviour.)

$('.xtraBlock ').mouseover(function(){
    $('.popup').hover();
});

http://jsfiddle.net/3mrpJ/10/embedded/result/

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

If the elements are dynamically created then the only option you have would be event delegation.

hover cannot be delegated . But you can attach mouseenter and mouseleave which can be delegated

Try this

$('#btn-create').on('click', function () {
    $('#container').append($('#spanTemplate').clone().attr('id', ''));
});

$('#container').on('mouseenter', 'label', function (e) {
    $('input', e.currentTarget).addClass('a');
}).on('mouseout', 'label', function (e) {
    $('input', e.currentTarget).removeClass('a');
});

Check Fiddle

Upvotes: 0

Related Questions