如何使悬停动作图标在Jquery中可单击？

时间：2019-03-18 07:04:32

标签： jquery css

我试图使动作图标出现在每个悬停项目上，并且可以单击以在其上执行特定事件。但是，从下面的脚本中，我无法阻止操作图标消失，这就是为什么我无法单击任何图标来执行特定操作的原因。

$(document).ready(function() {
  var ul = `
    			<div class="item">
					<ul class="list-inline" style="float: left;margin-left: -110px;margin-top: 20px;">
					  <li><a href="#"><i class="fa fa-plus-circle icon-add"></i></a></li>
					  <li><a href="#"><i class="fa fa-pencil-square-o icon-edit"></i></a></li>
					  <li><a href="#"><i class="fa fa-trash-o icon-remove"></i></a></li>
					  <li><a href="#"><i class="fa fa-arrows-v icon-move"></i></a></li>
					</ul>
    			</div>
		`;
  $('.item').hover(
    function() {
      $(ul).insertBefore($(this).find('.item-head'));
    },
    function() {
      $(this).find('div.item').remove();
    });

})
.item-head {
  color: #365efe;
}

.action-icon {
  float: left;
  margin-top: 25px;
  margin-left: -40px;
}

.icon-add {
  color: #4caf50;
}

.icon-edit {
  color: #00bcd4;
}

.icon-remove {
  color: #f44336;
}

.icon-move {
  color: #9e9e9e;
}

.in-item {
  display: block;
}

.out-item {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-sm-12">
  <div class="message"></div>
  <h3>Preview</h3>
  <div class="container" style="border: 1px solid #ccc;width: 70%;">
    <div class="row">
      <div class="col-xs-12">
        <div class="item">
          <h3 class="item-head" style="float: left;">Customer [form]</h3>
          <p style="clear: both;">Customer is module for recording information related to customer such as Name, Address, Date of Birth, Place of Birth, ID Number, etc.</p>
        </div>
        <div class="item">
          <h3 class="item-head">First Name English [label]</h3>
          <p class="definition">The name that was given to you when you were born and that comes before your family name. This field accept only English Character.</p>
        </div>
        <div class="item">
          <h3 class="item-head">Salutation [label]</h3>
          <p>A greeting in words or actions, or the words used at the beginning of a letter or speech. This field has values such as Mr, Ms, Miss.</p>
        </div>
      </div>
    </div>
  </div>
  </form>
</div>

尽管，我尝试设置Timeout()来延迟它消失的时间，但是它仍然有效。

        setTimeout(function(){
                $(this).find('div.item').remove();
            },4000);

如图所示，如何使动作图标可单击？谢谢

2 个答案:

答案 0 :(得分：2)

将以下CSS添加到现有代码中，以使列表悬停。 

.list-inline {
float: left;
background: trasparent;
position: absolute;
left: -110px;
top:12px;
height:40px;}

div.item { position:relative; }


$(document).ready(function() {
  var ul = `
    			<div class="item">
					<ul class="list-inline">
					  <li><a href="#"><i class="fa fa-plus-circle icon-add"></i></a></li>
					  <li><a href="#"><i class="fa fa-pencil-square-o icon-edit"></i></a></li>
					  <li><a href="#"><i class="fa fa-trash-o icon-remove"></i></a></li>
					  <li><a href="#"><i class="fa fa-arrows-v icon-move"></i></a></li>
					</ul>
    			</div>
		`;
  $('.item').hover(
    function() {
      $(ul).insertBefore($(this).find('.item-head'));
    },
    function() {
      $(this).find('div.item').remove();
    });
})
.item-head {
  color: #365efe;
}

.action-icon {
  float: left;
  margin-top: 25px;
  margin-left: -40px;
}

.icon-add {
  color: #4caf50;
}

.icon-edit {
  color: #00bcd4;
}

.icon-remove {
  color: #f44336;
}

.icon-move {
  color: #9e9e9e;
}

.in-item {
  display: block;
}

.out-item {
  display: none;
}

.list-inline > li:last-child {
padding-right: 25px;
}
.list-inline {
    float: left;
    background: trasparent;
    position: absolute;
    left: -110px;
    top:12px;
    height:40px;
}
div.item {
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-sm-12">
  <div class="message"></div>
  <h3>Preview</h3>
  <div class="container" style="border: 1px solid #ccc;width: 70%;">
    <div class="row">
      <div class="col-xs-12">
        <div class="item">
          <h3 class="item-head" style="float: left;">Customer [form]</h3>
          <p style="clear: both;">Customer is module for recording information related to customer such as Name, Address, Date of Birth, Place of Birth, ID Number, etc.</p>
        </div>
        <div class="item">
          <h3 class="item-head">First Name English [label]</h3>
          <p class="definition">The name that was given to you when you were born and that comes before your family name. This field accept only English Character.</p>
        </div>
        <div class="item">
          <h3 class="item-head">Salutation [label]</h3>
          <p>A greeting in words or actions, or the words used at the beginning of a letter or speech. This field has values such as Mr, Ms, Miss.</p>
        </div>
      </div>
    </div>
  </div>
  </form>
</div>

答案 1 :(得分：1)

以这种方式使用它：

 function() {
    setTimeout(() => {
     $(this).find('div.item').remove();
    },2000)
    })
相关问题
最新问题