CSS悬停不起作用

Posted 2023-03-06

【中文标题】CSS悬停不起作用

【英文标题】：Css hover isn't working

【发布时间】：2013-04-13 06:42:58

【问题描述】：

这是我的代码。我做了这个——当我悬停表格单元格时，它的背景图像会发生变化，这很容易。 但是我想这样做，当我在第一个表中悬停 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;

【问题讨论】：

你不能用 css 做到这一点。

如果您的表格 2 在单元格 5 内，则可以使用 css

那太糟糕了，有什么方法可以制作类似的东西吗？

如果你的 table2 需要在单元格 5 之外，那么你不能用 css 来做

@Marc：我很确定它不能，因为 CSS 无法基于悬停在其中的 .down 元素来定位第二个 table第一个table 元素；这需要 CSS 4 能够根据其子级选择祖先。

【参考方案1】：

除非 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/

【讨论】：

我们在学校还没有学过，所以我不能使用我没有学过的东西。

并删除了评论（另外：我不会说这是令人震惊的，只是需要澄清一下）。 @jjanko3：没有办法做到这一点，使用 CSS（除非在非常特殊的情况下）。

对不起，大卫，我不是故意要表现得那么刻薄。当人们指出我的错误时，我喜欢它，我只是倾向于使用华丽的语言而忘记了我在互联网上，任何使用它都可能带有讽刺意味。

@jjanko3 我用第二个链接更新了我的评论。这就是它可能只使用 CSS 和 HTML 的原因。您会注意到 Table2 现在是 .down 的子项。在这种情况下，CSS 实际上只对操作 DOM 对象及其后代（而不是像您尝试的那样是父的兄弟姐妹）有效。

@LNendza Maby 我可以制作 5 个 1 行 1 列的不同表格，但第 5 个有 3 行，当我将第 5 个表格悬停在 1 行时，它会显示另外两个？然后我会得到其他表格单元格不会改变它们的大小。对吗？

【参考方案2】：

.down:hover .table2 行正在寻找类为 table2 的元素在类为 down 的元素中。如果您的表格是嵌套的，您只能在纯 CSS 中做您想做的事情。下面是你可以如何使用 jQuery 做你想做的事：

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

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

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

【讨论】：

我可以制作 5 个 1 行 1 列的不同表格，但第 5 个有 3 行，当我将第 5 个表格悬停在 1 行时，它会显示另外两个？

当您将鼠标悬停在根 table 元素上时，听起来您会尝试显示其他 td 元素。那可能会奏效。看起来您正在尝试制作嵌套下拉菜单，这通常使用uls 和lis 来完成。如果您想在纯 CSS 中执行此操作，则应查看此处的示例：(csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu)，以及演示：(csswizardry.com/demos/css-dropdown)。使用 jQuery（或其他 javascript 库）来实现这一点也不丢人。

谢谢，那我会使用那些ul和li，至少尝试使用它们。谢谢。