Question

对不起这个奇怪的标题......这就是我想要做的事情。我有一张桌子。在表格中，您将看到一行显示“联系人...”我想要发生的是当用户将鼠标悬停在“联系人...”的行上时我希望下面的单元格变得可见，但只有当行被徘徊时。

这就是问题......我正试图用这个来修饰现有的页面，但是网站使用了一个非常有限的CMS，它不允许使用自定义脚本或样式表，所有内容都必须是内联的。无论如何要完成我想要的东西吗？

这是代码......

    <table border=1 style="display: inline-block;">
  <tr>
    <th style="background-color: #660000; color: #FFFFFF"><strong>Person #1</strong><br />Person Title</th>
  </tr>
  <tr>
    <td style="background-color: #e0e0eb">
      <p>&nbsp;&nbsp;<i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Line #1<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Line #2</p>
      <p>&nbsp;&nbsp;<i class="fa fa-phone" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;(###) ###-####</p>
      <p>&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:email@email.com">person@email.com</a>&nbsp;&nbsp;</p>
    </td>
  </tr>
  <tr>
    <th style="background-color: #660000; color: #FFFFFF;">Contact Person for...</th>
  </tr>
  <tr>
    <td style="background-color: #e0e0eb;">
      <ul>
        <li>Task #1</li>
        <li>Task #2</li>
        <li>Task #3</li>
        <li>Task #4</li>
      </ul>
    </td>
  </tr>
</table>

使用内联CSS / JS仅在悬停时隐藏/显示表行

0 个答案: