悬停功能jquery问题

Question

我有一个悬停功能，一旦悬停将显示该div的更多信息。但是，您会发现此操作无法正常进行，并且多次触发并且无法正确隐藏。

我希望这样，如果将鼠标悬停在一个div上，一旦悬停，它将关闭（然后，如果将它们悬停在第二个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();
});


});