为什么：td悬停不起作用？

debugcn 发表于 Dev

用户名

我有一个网站要显示两个不同的数据集，因此我建立了一个表格，如下所示：

<table>
    <tr>
        <td class="dataA">HELLO</td>
        <td class="dataB">LOL</td>
    </tr>
    <tr>
        <td id="aDescription">lol</td>
    </tr>
</table>

我还在悬停时添加了一个动画，以便在下一个表格行中提供对比较的补充说明（如带有的行#aDescription）

td{
    width: 50%
}

table{
    width: 100%;
    text-align: center
}

#aDescription{
    opacity: 0;
    transition-duration: 0.5s
}

.dataA:hover + #aDescription{
    opacity: 1 
}

但是，当我将鼠标悬停在时dataA，#aDescription不会出现。如果我将表数据改为段落，则可以完美地工作。

我已经在Stack Overflow上搜索了答案，有人指出了的使用!important，但即使添加也没有什么区别。

这是怎么回事，我该如何解决？

丹尼斯·塞古瑞特（DenysSéguret）

您的问题不是，:hover而是+：仅当第二部分是第一个部分旁边的元素（它是相邻的同级组合器）时，它才起作用。

您必须使用javascript或更改HTML。

解决方案1：~与修改后的HTML一起使用：

#aDescription{
    opacity: 0;
    transition-duration: 0.5s
}

.dataA:hover ~ #aDescription{
    opacity: 1 
}

<div id=table>
  <span class=dataA>HELLO</span>
  <span class=dataB>LOL</span>
  
  <div id="aDescription">lol</div>
</div>

解决方案2：使用一些JavaScript：

$('.dataA').hover(function(){
  $("#aDescription").toggleClass("shown");
})

td{
    width: 50%
}

table{
    width: 100%;
    text-align: center
}

#aDescription{
    opacity: 0;
    transition-duration: 0.5s
}

#aDescription.shown {
    opacity: 1 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td class="dataA">HELLO</td>
        <td class="dataB">LOL</td>
    </tr>
    <tr>
        <td id="aDescription">lol</td>
    </tr>
</table>

HTML中的表通常不是正确的布局解决方案，但是当您遇到诸如元素成为同级之类的约束时，很难维护您的代码。这就是第二种解决方案通常更好的原因。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。