Заменить Div при наведении другой Div

Question

Я хочу заменить дивы в таблице, когда я двигаю мышь над другими дивами Существует начальная таблицу 2х2 с A, B, C и D.

клетки B, D, F и H не видны.

Они появлялись бы только при перемещении мыши над ячейками, которые уже есть.

Если вы переместите указатель мыши на ячейку A, ячейка C исчезнет и вместо этого появится D.

Если вы переместите указатель мыши на ячейку C, ячейка G исчезнет и вместо этого появится H.

Если вы переместите указатель мыши на ячейку E, ячейка A исчезнет и вместо этого появится B.

Если вы переместите указатель мыши на ячейку G, ячейка E исчезнет и появится F вместо этого.

#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(); 
}); 

Я хочу, чтобы содержимое и фон ячеек менялись. Я пробовал делать это только в CSS, но не мог найти способ сделать Div disapear, попытался найти что-то здесь и нашел метод JS, но я не могу заставить его работать так, как я хочу.

Когда я перемещаю мышь над ячейкой A, C исчезает, и появляется D, но фон не заполняет всю ячейку, и когда я перемещаю мышь по ячейке C, она просто мерцает. Это несколько успешный, но я не могу понять, как бы я сделал всю работу стола.

Thanks

Answer 1

Я бы не использовать .show(), так как он собирается установить display в inline, который не достигнет своей цели отображения каждого span как table-cell.

(Примечание: Там двоеточие отсутствует CSS ->background: blue;)

Это то, что я придумал:

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'); 

Выезд рабочей скрипку в http://jsfiddle.net/JohnnyEstilles/o7Lbr9ox/.

Answer 2

Вот код, необходимый для этого. Я создал метод, который, когда первый завис, второй исчезает, а третий занимает свое место.

Ссылка на рабочий 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"); 
});