javascript - 带有 css 自定义错误的 jquery 中的鼠标悬停

Question

一支笔:https://codepen.io/anon/pen/eKzEVX?editors=1111

我在 Laravel 中构建了一个 Form Select:

{!! 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');
            })

一切都很好，除了我想在带有样式 top: 3em 和 onmouseout top: 1em 的 onmouseover 时拥有它；

当我添加它时它会闪烁，因为它同时执行两个 $.css 函数。

有什么想法吗？非常感谢您。

Answer 1

在你的情况下，问题是当悬停时，元素获得 top 3em 的 CSS 属性，然后触发 mouseout 事件，因为元素不存在。

所以使用一些其他属性，如填充，它不会改变元素的位置(这也会让您更好地理解为什么会发生这种情况)。

如果元素没有按照您想要的方式显示，那么您可以将元素包装在 span 或 wrapper 中，然后在该包装器上应用事件。这样您的元素看起来就是您想要的样子。

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