jQuery: Div erzeugen nach einer Bedingung

Wenn das Dokument eine img-hover Klasse besitzt und danach sich ein a befin­det, dann soll direkt nach dem a‑tag <div class="ae-post-overlay"></div> das div ein­ge­fügt werden.

Dies kann genutzt wer­den um einen Hover zu rea­li­sie­ren oder sons­ti­ger Inhalt.

In die­sem Beispiel han­delt es sich um ein Overlay, wel­ches beim Hovern erschei­nen soll.

jQuery(document).ready(function($) {
  $(".img-hover a").append('<div class="ae-post-overlay"></div>');
});

.ae-post-overlay {
    display: none;
    background-color: rgb(255 255 255 / 25%);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 21;
    transition: ease-in .5s;
}
Übergordnete-Klasse:hover .ae-post-overlay {
    display: block !important;
}