Mouseleave preventDefault issue

Question

I am trying to preventDefault mouseover on some condition without success. The idea is to show/hide icon next to disabled input on mouseover/mouseleave and keep it on input enable and it works fine. What I am not able to do is to hide icon on blur.

HTML

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

JS

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

// Disabled input on blur
$('.ui.input').on('blur', '.active', function () {
  $('.ui.input').addClass('disabled transparent');
});

 // Show trash icon on hover
$('.element').mouseover(function() {
  $(this).find('.trash').css('display', 'block');
})  

// Would like to keep trash icon on input focus and hide icon on blur
$('.element').mouseleave(function(event) {
  if($(this).find('input').is(":focus")) {
    event.preventDefault();
  } else {
  $(this).find('.trash').hide();
  }
});

Here is a fiddle

Thanks for help

Answer 1

Just fix it in CSS with first adding an active class to .element first. Always better to use 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');
});

and in 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
}

Here is http://jsfiddle.net/Greggg/e1x7jnor/6/