Question

我有一个网站，我想显示两组不同的对比数据，所以我按如下方式设置了一个表：

<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，但即使添加也没有区别。

发生了什么，我该如何解决这个问题？

Answer 1

此处的问题不是:hover，而是+：它只适用于第二部分是第一部分旁边的元素（它是adjacent sibling combinator）。

您必须使用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中的表通常不是布局的正确解决方案，但是当你有像元素是兄弟的约束时，很难维护你的代码。这就是为什么第二种解决方案通常更好。

为什么：将鼠标悬停在td上不起作用？

1 个答案: