CODEWITHSUNDEEP
javascriptjqueryhtmlcssmouseover
Mateusz Mateja
Mateusz Mateja

Reputation: 269

Mouseover in jquery with css custom bug

A pen: https://codepen.io/anon/pen/eKzEVX?editors=1111

I have a Form Select build in Laravel:

{!! Form::select('status_id', $statuses, $post->status_id, ['class' => 'form-control post-sub-items-label ']) !!}

this generates:

<select name="status_id" class="form-control post-sub-items-label " onmouseover="this.size=this.length" onmouseout="this.size=1" size="1" style="width: 1.7em; background-color: transparent;"><option value="1" selected="selected">In draft</option><option value="2">Awaiting approval</option><option value="4">Approved</option><option value="5">Cancelled</option><option value="6">Published</option></select>

and want to have expand on hover drop-down options:

 $('select[name=status_id]').attr('onmouseover', 'this.size=this.length')
            .attr('onmouseout', 'this.size=1')
            .mouseenter(function () {
                $(this).css('width', '95%').css('background-color', 'white');
            })
            .mouseleave(function () {
                $(this).css('width', '1.7em').css('background-color', 'transparent');
            })

Everything is fine, except I want to have it when onmouseover with styling top: 3em and onmouseout top: 1em;

When I added this it's flashing cause it at the same time executes both $.css functions.

Any ideas? Thank you very much in advance.

Upvotes: 0

Views: 45

Answers (1)

sanjeev
sanjeev

Reputation: 4631

Well in your case the problem is that when hover, the element get a CSS property of top 3em, which then trigger the mouseout event, since element is not there.

So Use some other property like padding which is not changing the position of the element( this will also give you better understanding of why this is happening).

In case element is not getting displayed the way you want, then you can wrapper the element in span or wrapper, and apply event on that wrapper. So that you element look's the exact way you want.

Demo : https://codepen.io/anon/pen/eKzGBN?editors=1111

Upvotes: 1

Related Questions