Jquery 或 CSS 悬停在图像上并在 Drupal 视图中显示图像答案

【问题标题】：Jquery or CSS Hover Over Image and display Image in Drupal ViewsJquery 或 CSS 悬停在图像上并在 Drupal 视图中显示图像
【发布时间】：2012-04-13 20:06:31
【问题描述】：

感谢您对此进行调查。

我现在有一个 Drual 7 网站，我设置了视图来显示下面有一些内容的图像。

我似乎找不到任何地方可以修改视图如何显示内容的布局。

当您将鼠标悬停在图像上时，我需要能够在图像上显示放大镜。每个图像及其内容都显示在一个名为 .field-time 的 div 类中。

我不能修改任何 html，所以我只有 drupal 模板和 css 可以使用。我添加了 Jquery 来执行此操作，但不确定执行此操作的最佳方法。

【问题讨论】：

标签： jquery css drupal xhtml drupal-7

【解决方案1】：

您可以使用 css 来执行此操作。据我了解，当光标悬停在 .field-time 上时，您希望放大镜显示为光标。

.field-time:hover {
    cursor: url(*path to image*), auto;
}

图像的路径将是 .gif 或 .png 或您希望使用的指针。我不确定这是否适用于所有浏览器。

您可以查看更多信息here

希望对你有帮助

【讨论】：

自动;位很重要，因为这意味着如果您无法获取 url() 则使用默认光标。
感谢您的输入，这很有帮助，虽然我不是指光标，我的意思是整个图像有一个放大镜，它会弹出或淡入或其他东西。
在这种情况下，您可能会使用 javascript/jquery。您要查找的事件是 .hover()，类似于 $('.field-time').hover(function(){ //do something });
当我将鼠标悬停在图像上时，我非常希望能够在图像上显示放大镜。因为它链接到弹出的灯箱图像。这看起来对吗 $(document).ready(function(){ $('.field-item img').hover(function(){ $('img').attr('style', 'border-style:实心；边框颜色：白色；边框宽度：1px；')；})；})；
我知道那只是在我做任何其他事情之前我只是试图控制它而增加了一个无聊，我有一段时间没有接触过 Jquery