Javascript 将鼠标悬停在其他Div上时替换Div

当我将鼠标移到不同的div上时，我想替换表中的div 有一个带有A、B、C和D的初始表2x2

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

#HTML
A.
B
C
D
E
F
G
H
#CSS
#桌子{
显示：表格；
高度：200px；
宽度：200px；
}
.行{
显示：表格行；
身高：50%；
宽度：100%；
}
.细胞{
宽度：50%；
显示：表格单元格；
背景：红色；
}
.B、.D、.F、.H{
显示：无；
背景蓝；
}
#JS
$（'.row'）.hover（函数（）{
$（this.find（'.C'）.hide（）；
$（this.find（'.D'）.show（）；
}，函数（）{
$（this.find（'.D'）.hide（）；
$（this.find（'.C'）.show（）；
});

我想改变单元格的内容和背景。 我试着只在CSS中这样做，但找不到一种方法来制作Div disapear，试着在这里寻找一些东西，找到了JS方法，但我不能让它以我想要的方式工作

当我将鼠标移到单元格A上时，C消失，D出现，但背景并没有填满整个单元格，当我将鼠标移到单元格C上时，它只是闪烁。这有点成功，但我不知道如何才能使整张桌子工作

---

谢谢

以下是执行此操作所需的代码。我创建了一个方法，当第一个悬停时，第二个将消失，第三个将取而代之

指向工作JSFIDLE的链接：

我不会使用

.show（）

，因为它将

display

设置为

inline

，这将无法实现将每个

span

显示为

表格单元格的目标

（注意：有一个冒号缺少CSS->
背景：蓝色；
）

这就是我想到的：

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

查看位于的工作小提琴。
您的css已损坏。背景色：红色；
背景：红色很好。这是
背景：蓝色缺少冒号。谢谢你的评论，我没有复制代码。谢谢你的回答！它确实改进了我的代码，但是我发现第一个答案完全符合我想要它填充整个单元的方式。不客气，你会考虑我的答案吗？因为我的逻辑在两个解决方案中都被清楚地使用了。英雄所见略同。：-）我们两个都应该得到信用。我现在不能。。没有足够的声誉。但只要我能，我一定会的！谢谢，我很感激！不客气，菲利佩.：-）我在单元格中添加了一个边框，背景色从边框中溢出。我修复了它：隐藏；显示：内联块；在#表{}中，但当我做悬停操作时，新的细胞总是出血。你知道我如何修复它吗？你能分享你现在拥有的代码吗？（HTML、CSS、JS）使故障排除变得更容易。我在#table{}注释中留下了溢出和显示的行，这样您就可以很容易地发现颜色溢出。当这些行没有注释时，出血消失了，除非我把鼠标移到上面，背景发生了变化。菲利佩，你在用Chrome吗？如果是，那么这就是Chrome中webkit转换的问题。您可以通过添加
-webkit backface visibility:hidden
到
#表
div
。我之前没有提到这一点，因为您的原始CSS没有转换/旋转
div
。
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');