Replace Div when hover other Div

Question

I want to replace the Divs in a table when I move the mouse over different Divs There is an initial table 2x2 with A,B,C and D.

The cells B, D, F and H are non visible.

They would only appear when you move your mouse over the cells that are already there.

If you move your mouse over cell A, cell C would disapear and would appear D instead.

If you move your mouse over cell C, cell G would disapear and would appear H instead.

If you move your mouse over cell E, cell A would disapear and would appear B instead.

If you move your mouse over cell G, cell E would disapear and would appear F instead.

#HTML

<div id="table">
    <div class="row">
        <span class="cell A">A</span>
        <span class="cell B">B</span>
        <span class="cell C">C</span>
        <span class="cell D">D</span>
    </div>
    <div class="row">
        <span class="cell E">E</span>
        <span class="cell F">F</span>
        <span class="cell G">G</span>
        <span class="cell H">H</span>
    </div>
</div>

#CSS

#table {
    display: table;
    height:200px;
    width:200px;
}
.row {
    display: table-row;
    height:50%;
    width:100%;
}
.cell {
    width:50%;
    display: table-cell;
    background: red;
}

.B, .D, .F, .H{
    display: none;
    background blue;
}

#JS

$('.row').hover(function() {
    $(this).find('.C').hide();
    $(this).find('.D').show();
}, function() {
    $(this).find('.D').hide();
    $(this).find('.C').show();
});

I want the content and background of the cells to change. I tried doing so in CSS only but couldnt find a way to make a Div disapear, tried to look for something here and found the JS method but I cant make it work the way I want.

When I move the mouse over cell A, C disapears and the D does appear but the background doesnt fill the whole cell, and when I move the mouse over cell C it just flickers. It is somewhat a success but I cant figure how I would make the whole table work.

Thanks

Answer 1

Here's the code necessary to do that. I created a method that when the first is hovered, the second disappears and the third takes its place.

Link to working jsfiddle: http://jsfiddle.net/stroz/exrz0asc/1/

$(document).ready(function() {
    function registerConditionalHide(first, second, third) {
        $(first).hover(function() {
            $(second).hide();
            $(third).show();
        }, function() {
            $(third).hide();
            $(second).show();
        });
    }

    registerConditionalHide(".A", ".C", ".D");
    registerConditionalHide(".C", ".G", ".H");
    registerConditionalHide(".E", ".A", ".B");
    registerConditionalHide(".G", ".E", ".F");
});

Answer 2

I wouldn't use .show() since it's going to set display to inline , which will not achieve your goal of displaying each span as a table-cell .

(NOTE: There's a colon missing the CSS -> background: blue; )

This is what I came up with:

function showAndHide(trigger, item1, item2) {
  $(trigger)
    .on('mouseenter', function() {
      $(item1).hide();
      $(item2).css('display', 'table-cell');  
    })
    .on('mouseleave', function() {
      $(item1).css('display', 'table-cell');
      $(item2).hide();  
    });
}

showAndHide('.A', '.C', '.D');
showAndHide('.C', '.G', '.H');
showAndHide('.E', '.A', '.B');
showAndHide('.G', '.E', '.F');

Check out the working fiddle at http://jsfiddle.net/JohnnyEstilles/o7Lbr9ox/ .