Наведите курсор мыши на jquery с пользовательской ошибкой CSS

Question

Ручка: https://codepen.io/anon/pen/eKzEVX?editors=1111

У меня есть сборка Form Select в Laravel:

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

, которая генерирует:

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

и я хочу расширитьв выпадающих опциях при наведении:

 $('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');
            })

Все хорошо, кроме того, что я хочу иметь его, когда onmouseover со стилем top: 3em и onmouseout top: 1em;

Когда я добавил это,мигает, потому что одновременно выполняет обе функции $ .css.

Есть идеи?Заранее большое спасибо.

Answer 1

Что ж, в вашем случае проблема в том, что при наведении у элемента появляется CSS-свойство top 3em, которое затем вызывает событие mouseout, поскольку элемента там нет.

Так что используйте другое свойство, напримерpadding, который не меняет положение элемента (это также даст вам лучшее понимание того, почему это происходит).

Если элемент отображается не так, как вы хотите, вы можете обернуть элемент вspan или обертка, и применить событие к этой обертке.Так что ваш элемент выглядит именно так, как вы хотите.

Демо: https://codepen.io/anon/pen/eKzGBN?editors=1111