JSFiddle - React, Tailwind, and code Playground

HTML

<div class="portfolio-item-holder">
    <div class="portfolio-item-hover-content">
    </div>
</div>

CSS

.portfolio-item-holder {
    margin: 0 auto;
    text-align: center;
    border: 1px solid #00aa00;
    width: 500px;
    height: 500px;
}
.portfolio-item-hover-content {
    width: 250px;
    height: 250px;
    position:relative;
    top: 125px;
    left: 125px;
    background: #aa00cc;
}
.portfolio-item-hover-content:hover {
    background: #00aacc;
}

JavaScript

$('.portfolio-item-hover-content').hover(

function () {
   $(this).css('background','red');
},

function () {
    $(this).css('background','yellow');
});

$('.portfolio-item-holder').on('click', function () {
    $('.portfolio-item-hover-content').trigger('mouseenter');
});