JSFiddle - React, Tailwind, and code Playground

by Brian Chang

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;
}

.option {
    cursor: pointer;
}

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'));
                alert($('.frame div').index(this));
        })
});