jquery 中的鼠标悬停 css 自定义错误
Mouseover in jquery with css custom bug
一支笔:https://codepen.io/anon/pen/eKzEVX?editors=1111
我在 Laravel 中构建了一个表单 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 时使用它;
当我添加它时,它会闪烁,因为它同时执行两个 $.css 函数。
有什么想法吗?非常感谢您。
在你的情况下,问题是当悬停时,元素获得 top 3em
的 CSS 属性,然后触发 mouseout 事件,因为元素不存在。
所以使用其他 属性 之类的填充,它不会改变元素的位置(这也会让您更好地理解为什么会发生这种情况)。
如果元素没有按照您想要的方式显示,那么您可以将元素包装在 span 或 wrapper 中,然后在该包装器上应用事件。这样你的元素看起来就是你想要的样子。
一支笔:https://codepen.io/anon/pen/eKzEVX?editors=1111
我在 Laravel 中构建了一个表单 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 时使用它;
当我添加它时,它会闪烁,因为它同时执行两个 $.css 函数。
有什么想法吗?非常感谢您。
在你的情况下,问题是当悬停时,元素获得 top 3em
的 CSS 属性,然后触发 mouseout 事件,因为元素不存在。
所以使用其他 属性 之类的填充,它不会改变元素的位置(这也会让您更好地理解为什么会发生这种情况)。
如果元素没有按照您想要的方式显示,那么您可以将元素包装在 span 或 wrapper 中,然后在该包装器上应用事件。这样你的元素看起来就是你想要的样子。