1

这是我的代码。我做了这个——当我悬停表格单元格时，它的背景图像会发生变化，这很容易。但是我想这样做，当我在第一个表中将带有 class="down" 的单元格 5 悬停时，第二个表显示属性从无变为块我搜索了这个，我最终得到了所有这些代码，但它不起作用. 我需要使用没有 JavaScript 的纯 CSS。问题出在哪里，我做错了什么？

HTML

  <table border="0" class="table">
    <tr>
      <td>1</td>

      <td>2</td>

      <td>3</td>

      <td>4</td>

      <td class="down">5</td>
    </tr>
  </table>

  <table border="0" class="table2">
    <tr>
      <td>row2</td>
    </tr>

    <tr>
      <td>row3</td>
    </tr>
  </table>

CSS

.table
{
    left:200px;
    position:absolute;
}

td
{
    background-image:url(poga1.png);
    height:70px;
    width:100px;
}

td:hover
{
    -webkit-transition:1s;
    background-image:url(poga2.png);
}

.table2
{
    display:none;
    left:616px;
    position:absolute;
    top:77px;
}

.down:hover .table2
{
    display:block;
}
4

2 回答 2

0

该行.down:hover .table2正在寻找带有 class的元素table2 内的带有 class 的元素down。如果您的表格是嵌套的，您只能在纯 CSS 中做您想做的事情。以下是使用 jQuery 执行所需操作的方法：

$(document).ready(function() {
    $('.down').hover(function() {
        $('.table2').show();
    }, function() {
        $('.table2').hide();
    });
});

这是一个演示：http: //jsfiddle.net/mchail/b6PKT/

我在元素上添加了一个边框，td以便更容易看到您的悬停事件应该何时触发。

于 2013-04-19T19:23:53.243 回答
0

除非 Table2 是 Table1 的子级，否则您无法用 CSS 真正做到这一点。不过，它可以用 JavaScript 轻松完成（在本例中使用 jQuery）。在这里查看我的示例：

http://jsfiddle.net/Pb8dw/1/

$(document).ready(function() {
    $(".down").mouseover(function(){
        $(".table2").show();
    });

    $(".down").mouseout(function(){
        $(".table2").hide();
    });
});

这是在悬停时进行隐藏/显示的代码块。我冒昧地更新了您的源代码，以便更容易看到。

更新：如果您绝对，肯定地，必须在没有 JavaScript 的情况下这样做，那么仅使用 CSS 和 HTML 会如何：

http://jsfiddle.net/Pb8dw/2/

于 2013-04-19T19:28:37.667 回答