使表数据显示在悬停状态（javascript/jQuery或css）

我试图让一些span标记（图标）在您将鼠标悬停在整行上时显示在表元素各自的单元格中

我正在使用CSS，但我也愿意使用JS

HTML

---

它不起作用

css的一种方式是这样的

下面的片段

#table.icon{
宽度：50px；
高度：50px；
过渡：均为0.5s；
不透明度：0；
}
#表.行：悬停.图标{
不透明度：1；
}

艾玛
乙醇
物理科学
日期
书
建筑
姑娘们
朗姆酒

它们可能可见，但宽度/高度为0。测试它们是否正确显示/隐藏的一种方法是将一些测试文本放入其中一个跨距中，并查看它是否如预期的那样出现和消失。如果这是可行的，那么您需要为图标提供宽度和高度变量。我认为将

span

元素作为

tr

元素的子元素是无效的html。尝试完全删除span，并将

optionTray

类直接添加到要显示的

td

元素中。您需要将display属性更改为

table cell

，而不是

block

。当我直接将类添加到tr或td元素，而不是包含tr和td元素的span或div元素时，这似乎是可行的。有没有一种方法可以轻松地对多行执行此操作，即当您将鼠标悬停在第3行上时相应的图像/图标会出现，当您将鼠标悬停在第7行上方时，其相应的图像/图标会出现。我想这会更容易使用Javascript？Javascript功能强大，但css3非常短，无法编写简单的内容…我也可以为您提供一个js示例，但可能需要一些时间来处理按键……：d这很好！问题-当您将鼠标悬停在任何一行上时，为什么两行中的所有项目都不显示？在：hover伪命令之后，它将查找与该行对应的子元素，在该行中，鼠标移入和鼠标移出事件被触发a/k悬停。。在指向目标的DOM中，每个行为都是基于事件的。如果确实解决了您的问题，请勾选答案为已解决：D

<div class="row1">
    <tr>
        <td>
            <div class="checkbox">
              <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1">
              </label>
            </div>
        </td>
        <td><img id="preview1" src="images/dummyQueuePreview.png"></td>
        <td id="user1">Emma R.</td>
        <td id="fileName1">Ethanol v1.2</td>
        <td>Physical Science 1</td>
        <td>12/08/2105 - 13:46</td>
        <span class="optionTray">
            <td><span class="icon-bubble" style="font-size:30px;" id="bubble"></span></td>
            <td><span class="icon-stack" style="font-size:30px;"></span></td>
            <td><span class="icon-pencil" style="font-size:30px;"></span></td>
            <td><span class="icon-bin" style="font-size:30px;"></span></td>
            <td><span class="icon-checkbox-checked" style="font-size:30px;"></span></td>
        </span>
    </tr>
</div>

.optionTray{ display: none;}  .row1:hover .optionTray{display : block;}