Функция зависания jquery

Question

У меня есть функция наведения, которая когда-то зависнет, покажет больше информации об этом div. Однако вы можете видеть, что это работает не так, как должно быть, с несколькими выстрелами и не прячется правильно.

Я должен сделать это так, если при наведении мыши на один из дивов, когда он завис, то он закроется (тогда, если онинаведены на второй div, это будет отображать тот).

Многие функции уже есть, я просто борюсь с окончательными деталями этого.

Пожалуйста, посмотрите мой кодовый блокссылка ниже, любая помощь будет принята с благодарностью!

Codepen здесь: - https://codepen.io/scottYg55/pen/VwwKJvW

<div class="row fourrow">
    <div class="colinfo extrainfo">
        <div id="col-hover-1" style="display: none;">
            <h3>Vision</h3>
            <p>Lorem ipsum dolor sit amet, id luptatum appellantur vel, te nec consul delicatissimi. Nibh doctus nusquam at quo, qui ei malis graeco. Ubique nostrum et sed, eum ex graeco volumus epicuri. Te postea vituperata.</p>
        </div>
        <div id="col-hover-2" style="display: none;">
            <h3>Insight</h3>        
            <p>Lorem ipsum dolor sit amet, id luptatum appellantur vel, te nec consul delicatissimi. Nibh doctus nusquam at quo, qui ei malis graeco. Ubique nostrum et sed, eum ex graeco volumus epicuri. Te postea vituperata.</p>
        </div>
        <div id="col-hover-3" style="display: none;">
            <h3>Technology</h3>     
            <p>Lorem ipsum dolor sit amet, id luptatum appellantur vel, te nec consul delicatissimi. Nibh doctus nusquam at quo, qui ei malis graeco. Ubique nostrum et sed, eum ex graeco volumus epicuri. Te postea vituperata.</p>
        </div>
        <div id="col-hover-4" style="display: none;">
            <h3>Confidence</h3>     
            <p>Lorem ipsum dolor sit amet, id luptatum appellantur vel, te nec consul delicatissimi. Nibh doctus nusquam at quo, qui ei malis graeco. Ubique nostrum et sed, eum ex graeco volumus epicuri. Te postea vituperata.</p>
        </div>
    </div>  
    <div class="col col1" data-contentid="1">
        <p>The <strong>vision</strong> to understand your culture and goals. </p>
        <h2>Vision</h2>
    </div>
    <div class="col col2" data-contentid="2">
        <p>The intelligence to source just the right candidates.</p>
        <h2>Insight</h2>
    </div>
    <div class="col col3" data-contentid="3">
        <p>The <strong>technology</strong> to complete rigorous assessments, fast. </p>
        <h2>Technology</h2>
    </div>
    <div class="col col4" data-contentid="4">
        <p>The <strong>mindset</strong> to represent your business on your behalf. </p>
        <h2>Confidence</h2>
    </div>  
</div>

CSS

.fourrow {position: relative;display:flex;width:1500px;margin:auto;}


.colinfo {
    position: relative;
    z-index: 99;
    width: 0;
    text-align: center;
    opacity: 1;

}
.extrainfo {
    background: #c2281b;
    position: absolute;
    z-index: 999;
    height: 100%;
    pointer-events: none;
    color: #fff;

}

.extrainfo, .extrainfo > div {pointer-events:none;}

.extrainfo h3, .extrainfo p {
    color:#fff;
    width:80%;
    margin:auto;
}

.fourrow .col {
    height: 500px;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    padding-bottom: 25%;
    position: relative;
    color:#fff;
}

.fourrow h2 {
    position: absolute;
    bottom: 10px;
}

.fourrow .col:nth-child(2) {background-image:url(http://www.project-progress.co.uk/ashfield/superhero/wp-content/uploads/vision.png);}
.fourrow .col:nth-child(3) {background-image:url(http://www.project-progress.co.uk/ashfield/superhero/wp-content/uploads/insight.png);}
.fourrow .col:nth-child(4) {background-image:url(http://www.project-progress.co.uk/ashfield/superhero/wp-content/uploads/technology.png);}
.fourrow .col:nth-child(5) {background-image:url(http://www.project-progress.co.uk/ashfield/superhero/wp-content/uploads/confidence.png);}


.fourrow .col p {
    width:60%;
    color:#fff !important;
}

Jquery

$(document).ready(function(){


jQuery(".col").mouseover(function(){
  $(".extrainfo").css("opacity", "1");
    $(".extrainfo p, .extrainfo h3").css("opacity", "0");
    setTimeout(function() { 
        $(".extrainfo p, .extrainfo h3").css("opacity", "1"), 1500;
    }, 1000);       
  $(".extrainfo").stop().animate({width: '100%'}, 1000);
  var num = $(this).data('contentid');
  jQuery('#col-hover-' + num).toggle();
    $(".col").css("pointer-events", "none");
    $(this).css("pointer-events", "auto");
});

jQuery(".col").mouseout(function(){
    setTimeout(function() { 
        $(".col").css("pointer-events", "auto");
    }, 1500);   
  $(".extrainfo").stop().animate({width: '0'}, 1000);
  var num = $(this).data('contentid');
  jQuery('#col-hover-' + num).toggle();
});


});