JSFiddle - React, Tailwind, and code Playground

by ericjohannsen

HTML

<div class="mx">
    <div>
        <div>&nbsp;</div>
        <div><div class="mxHdr">Choice 1</div></div>
        <div><div class="mxHdr">Choice 2</div></div>
        <div><div class="mxHdr">Choice 3</div></div>
    </div>
    <div>
        <div>This is option A</div>
        <div><div class="mxIn"><input type="radio" name="a" /></div><div class="mxOlay">Choice 1</div></div>
        <div><div class="mxIn"><input type="radio" name="a" /></div><div class="mxOlay">Choice 2</div></div>
        <div><div class="mxIn"><input type="radio" name="a" /></div><div class="mxOlay">Choice 3</div></div>
    </div>
    <div>
        <div>This is longer option B</div>
        <div><div class="mxIn"><input type="radio" name="b" /></div><div class="mxOlay">Choice 1</div></div>
        <div><div class="mxIn"><input type="radio" name="b" /></div><div class="mxOlay">Choice 2</div></div>
        <div><div class="mxIn"><input type="radio" name="b" /></div><div class="mxOlay">Choice 3</div></div>
    </div>
</div>

CSS

div.mx
{
    display:table;
    border: 1px solid #D4AF37;
}

div.mx>div
{
    display:table-row;
}

div.mx>div:first-child
{
    background:#FADA5E !important;            
}

div.mx>div:nth-of-type(even)
{
    background-color:#FFFDD0;
}

div.mx>div:nth-of-type(odd)
{
    background-color:#F3E5AB;
}

div.mx>div>div
{
    display:table-cell;
    vertical-align:middle;
    position: relative;    
}

div.mxRowHover
{
    background-color:#F8DE7E !important;
}

div.mxIn
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align:center;
}

div.mxOlay
{
    z-index: 999;
    color:transparent;
    opacity:0;
    font-size:0.6em;
    font-weight:bold;
    text-align:center;
    vertical-align:bottom;
    cursor: pointer;
    max-width:50px;
    min-height:30px;
    overflow:hidden;
}

div.mxIn>input
{
    vertical-align:middle;
}

div.mx>div>div:first-child
{
    padding-right: 3px;
    border-left: none;
}

div.mx>div>div:not(first-child)
{
    padding: 0px 3px;
    border-left: 1px dashed #D4AF37;
}

JavaScript

if ($.browser.msie && $.browser.version == 7)
{
    $('div.mxOlay').remove();
    $('div.mxIn').css('position', 'relative');
    $("div.mx>div>div").css('padding', '5px').wrap("<td />");
    $("div.mx>div").wrap("<tr />");
    $("div.mx").wrapInner("<table />");
}

$('div.mx>div').mouseenter(function(e)
                            {
                                $(this).addClass('mxRowHover');
                            });

$('div.mx>div').mouseleave(function(e)
                            {
                                $(this).removeClass('mxRowHover');
                            });                                

$('div.mxOlay').mouseenter(function(e)
                            {
                                $(this).css('color', 'black');
                                $(this).fadeTo(1000, 0.4, 'easeInExpo');
                            });

$('div.mxOlay').mouseleave(function(e)
                            {
                                $(this).fadeTo(0, 0.0);
                                $(this).css('color', 'transparent');
                            });
$('div.mxOlay').click(function(e)
                      {
                          var inp = $(this).siblings('div.mxIn').children('input');
                          inp.click();
                      });