JSFiddle - React, Tailwind, and code Playground
HTML
<div class="frame"><div class="question"><img src="https://drive.google.com/uc?export=view&id=0B_2mQwhMw6g2djVBTTlSclEtSE0"></div>
<div class="option"><img src="https://drive.google.com/uc?export=view&id=0B_2mQwhMw6g2cFlOUzhPdkVxVDA"></div>
<div class="option"><img src="https://drive.google.com/uc?export=view&id=0B_2mQwhMw6g2NmhXVkMwR3BhYUU"></div>
<div class="option"><img src="https://drive.google.com/uc?export=view&id=0B_2mQwhMw6g2LUpvMkVRWnR3eEU"></div>
<div class="option"><img src="https://drive.google.com/uc?export=view&id=0B_2mQwhMw6g2c0JFWU9EU1BOdk0"></div>
<div class="option"><img src="https://drive.google.com/uc?export=view&id=0B_2mQwhMw6g2b24tNXdaSFBpc0U"></div></div>
CSS
div {
display: table;
width: 100%;
border: none;
}
img {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.highlighted {
border: 2px solid red;
background-color: #69D2E7;
}
.frame {
border: 2px solid black;
}
JavaScript
$(document).ready(function(){
$('.frame')
.on('mouseenter', 'div:not(.highlighted):not(.question)', function(){
$(this).css('border','2px solid black');
})
.on('mouseleave', 'div:not(.highlighted):not(.question)', function(){
$(this).css('border','none');
})
.on('click', 'div:not(.question)', function(){
$(this).toggleClass('highlighted');
//if($(this).is('.highlighted'))
//alert($(this).attr('class'));
})
});