replace one icon with another-CodePudding

I have 2 icons in a wrapper what I want to achieve is when hover on the icon one of the icons hide and the other one shows. Something to note is the wrappers are getting loaded dynamically so I need to access them through document. Also I'm trying to use this because I only want the hovered element to change. How can I achieve this? I wrote a rough code below. Thanks in advance

var fa_regular;
var fa_solid;

$(document).on('mouseenter', '.wrapper .fa-regular', function() {
  fa_regular = $(this)
  $(fa_regular).css('display', 'none')
  $(fa_solid).css('display', 'flex')
});

$(document).on('mouseleave', '.wrapper .fa-solid', function() {
  fa_solid = $(this)
  $(fa_regular).css('display', 'flex')
  $(fa_solid).css('display', 'none')
});

.wrapper i {
  font-size: 40px;
  margin-top: 4%;
  cursor: pointer;
}

.wrapper .fa-regular {
  display: flex;
}

.wrapper .fa-solid {
  display: none;
  color: rgb(224, 0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />


<div >
  <i ></i>
  <i ></i>
</div>

<div >
  <i ></i>
  <i ></i>
</div>

CodePudding user response：

$obj -> parent.wrapper -> find inside

$(document).on('mouseenter', '.wrapper .fa-regular', function() {
    $(this).css('display', 'none')
    $(this).parent().find('.fa_solid').css('display', 'flex')
});
$(document).on('mouseleave', '.wrapper .fa-solid', function() {
    $(this).css('display', 'none')
    $(this).parent().find('.fa_solid').css('display', 'flex')
});