Как сделать чтобы событие при наведении срабатывало для одного, а не для всех с одинаковыми классами?

У меня несколько элементов с таким классом, но при наведении срабатывает сразу на всех элементах с этим классом, как сделать чтобы событие срабатывало только для того элемента, на который наведен курсор мыши?

jQuery(document).ready(function ($) {
    $(".has__child").mouseenter(function (event) {
        $(".has__parent").css({"display":"flex"});
    }).mouseleave(function (event) {
        $(".has__parent").css({"display":"none"});
    });

    $(".has__parent").mouseleave(function (event) {
        $(this).css({"display":"none"});
    }).mouseenter(function (event) {
        $(".has__parent").css({"display":"flex"});
    });
});