Question

当我将鼠标移到不同的Div上时，我想替换表格中的Div 有一个初始表2x2，包括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中这样做，但是找不到让Dis消失的方法，试图在这里寻找一些东西并找到JS方法，但我不能让它按照我想要的方式工作。

当我将鼠标移到单元格A上时，C消失并且D确实出现，但背景不会填满整个单元格，当我将鼠标移动到单元格C上时，它只是闪烁。这有点成功，但我不知道如何让整个表格工作。

由于

Answer 1

这是执行此操作所必需的代码。我创建了一种方法，当第一个悬停时，第二个消失，第三个取代它。

链接到工作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

我不会使用.show()，因为它会将display设置为inline，这将无法实现将每个span显示为table-cell的目标}。

（注意：有一个冒号错过CSS - ＆gt;＆gt; 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/查看工作小提琴。

当悬停另一个Div时替换Div

2 个答案: