Question

我试图在某些条件下阻止默认鼠标悬停但没有成功。我们的想法是在mouseover / mouseleave上禁用输入旁边显示/隐藏图标，并将其保持在输入启用状态，并且工作正常。我无法做的是隐藏模糊图标。

HTML

getSupportActionBar().setElevation(0);

JS

<!-- Element -->
<div class="ui padded grid element">
  <div class="column">
    <a href="#"><i class="trash icon" style="display: none;"></i></a>
  </div>
  <div class="column page-element-page">
    <div class="ui disabled transparent input">
        <input value="Input 1" type="text" />
    </div>
  </div>
</div>
<!-- Element -->
<div class="ui padded grid element">
  <div class="column">
    <a href="#"><i class="trash icon" style="display: none;"></i></a>
  </div>
  <div class="column page-element-page">
    <div class="ui disabled transparent input">
        <input value="Input 2" type="text" />
    </div>
  </div>
</div>

这是fiddle

感谢您的帮助

Answer 1

首先在CSS中修复它，首先将活动类添加到.element。总是更好地使用CSS

$(".disabled.transparent").dblclick(function () {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active').focus();
$(this).closest('.element').addClass('active');
    });

/* Disable input on blur page name */
$('.ui.input').on('blur', '.active', function () {
$('.ui.input').addClass('disabled transparent');
$(this).closest('.element').removeClass('active');
});

和CSS

.page-element .trash,
.page-element .setting {
  display: none;
}

.page-element:hover .trash,
.page-element:hover .setting {
  display: block;
}

.page-element.active .trash,
.page-element.active .setting {
  display: block !important
}

这是http://jsfiddle.net/Greggg/e1x7jnor/6/

Mouseleave preventDefault问题

1 个答案: