几天前，我的朋友请我帮忙解决他面试时遇到的问题。 面试官给了他以下代码片段：
tbody:hover tr { opacity: 0.24; }
还添加了：“现在，当您将鼠标悬停在桌子上时，所有行都会消失。 而且您需要确保您指向的行保持活动状态。”
解决方案
在当前解决方案中，当您将鼠标悬停在tbody：hover元素上时，所有tr元素都会立即将其不透明度更改为0.24。
tbody:hover tr { opacity: 0.24; }
我需要更改选择器，以便将不透明度应用于除所指向的那个元素之外的所有tr元素。
对于这种实现，您将需要使用悬停而不是伪类。 在悬停的帮助下，浏览器将确定该行已指向，而在没有帮助的情况下，它将理解不应对其应用任何样式。
tbody:hover tr:not(:hover) { opacity: 0.24; }
家庭作业
为了进行整合，我准备了一项家庭作业，其中需要纠正以文本显示图像时的错误。 我准备了以下标记和样式：
<main class="content"> <p>Some text</p> <img src="picture.jpg" alt="some alt"> <p>Some text</p> </main>
.content img { margin-top: 35px; margin-bottom: 35px; }
错误是，如果图像是第一个元素，则它的顶部仍然有一个空白，但是您需要确保它不存在。
<main class="content"> <img src="picture.jpg" alt="some alt"> <p>Some text</p> <p>Some text</p> </main>
因此，如果图像是最后一个元素，则需要从底部移除缩进。
<main class="content"> <p>Some text</p> <p>Some text</p> <img src="picture.jpg" alt="some alt"> </main>