Question

我和我公司的网站很不一致。我的公司在这个网站上花了数千美元，我只能使用非开源CMS系统。我不得不打架（而且我们支付了1,200美元）所以我可以提供一个CSS页面来工作。我们的网站开发人员向我们收取每一个小改动的wazoo因此我不能要求他们编程这个（他们可能会估计3美元） -5k为工作）。

我们原来的灯塔页面，这里（现场）：http://www.golakehavasu.com/activities/more_to_do/lighthouses.aspx有这个糟糕的代码，用户点击灯塔名称，一个单独的窗口弹出一个灯塔的照片。到用户完成时，已经打开了23个单独的窗口。由于我们是一个度假社区，我们在冬天会得到很多雪鸟，我必须解释如何双击，我们接到他们的电话，想知道为什么我们的网站损坏了他们的电脑（是的，这真的发生了）。我很乐意忽略这些电话，但我不能。对于那些不那么精通网络的人，我需要一个更好的解决方案。

我想将这些图像转换为悬停/弹出状态，虽然由于开发人员对网站的锁定而非常有限（并且不是一个完整的技术头编码器），但我能够研究一些代码并获得弹出窗口合理地工作。测试页面在这里（不是实时）：http://www.golakehavasu.com/test.aspx

一个主要问题：当靠近灯塔桌的底部时，灯塔照片位于页脚下方，不可见;这不会与老板一起飞行。我需要那些弹出窗口保留在浏览器窗口内，并且无法直接将文件上传到服务器（我只能通过CMS后端系统创建页面）。我的双手绑在这里。 任何帮助都会受到高度赞赏，并且会给老板兼给我一些大分（并且可能有助于让我全职雇用医疗保险福利）。

我正在尝试复制/粘贴我的代码，但它已被剥离。试图发布我获得代码的网站，但系统说我的声誉低于10，所以我不能发布超过2个链接。

再次，请帮助。

Answer 1

我不知道为什么我这样做，除了我真的很无聊......

将.lighthousepopup a:hover span设为margin-top: -350px;。这将推动图片向上，使底部与超链接一致，并且它们不会从屏幕底部掉落。

但是现在你在顶部遇到了同样的问题，所以你需要使用nth-child选择器修复前几行没有这个问题。由于表格的奇怪布局（列标题下方的标题以及tbody中的所有内容，真的吗？），第一行实际上是第6行，因此您需要从那里开始。

table.grid tr:nth-child(6) td .lighthousepopup a:hover span,
table.grid tr:nth-child(7) td .lighthousepopup a:hover span,
table.grid tr:nth-child(8) td .lighthousepopup a:hover span,
table.grid tr:nth-child(9) td .lighthousepopup a:hover span
{
  margin-top: 0px;
}

所以现在第1-4行的图像顶部与链接内联，而表格的其余部分则将图像的底部与链接内联。

在浏览器中保持弹出窗口的悬停弹出代码 - 只能使用CSS

1 个答案: