JSFiddle - React, Tailwind, and code Playground

HTML

<div class="recent-question"> 
<img src="images/new/img-sample.gif" alt="" width="70" height="60" />
    <div class="question-text">
    <h3>Heading</h3>
        <p><a href="#">Yadda Yadda Yadda</a></p>
    </div>
    <div class="interact" style="display:none;">
        <ul>
            <li><a href="#">Choice1</a></li>
          <div class="question-text">
              <li><a href="#">Choice2</a></li>
            <li><a href="#">Choice3</a></li>
        </ul>
    </div>
</div>

CSS

.recent-question {
   border: 1px dashed red;
}
.interact {
   border: 1px dashed blue;
}

JavaScript

$$(".recent-question").each(function(div) {
   div.observe('mouseover', function(e) {
       div.down('.interact').appear(); //FadeIn
   });
    div.observe('mouseout', function(e) {
        var mouse_over_element;
        if (e.toElement) {
            mouse_over_element = e.toElement;
        } else if (e.relatedTarget) {
            mouse_over_element = e.relatedTarget;
        }
        
        if (mouse_over_element == null) {
            return;
        }
        if (!mouse_over_element.descendantOf(div) && div != mouse_over_element) {
           div.down('.interact').fade(); //FadeOut
        }
   });
});