放大镜覆盖在wordpress中的图像悬停

Posted 2023-05-08

【中文标题】放大镜覆盖在wordpress中的图像悬停

【英文标题】：magnifying glass overlay on image hover in wordpress

【发布时间】：2012-03-18 01:40:53

【问题描述】：

我收到了this 画廊。当您悬停图像时，我想应用放大镜（或其他东西），因此用户可以轻松看到图像可以变大。 我想要的效果和this one差不多。

我一直在 wordpress 中查看不同的文件，但我的问题是我无法添加 <span class="roll" ></span> 在链接内，带有图片。

如果有人知道怎么做，请告诉。 :-)

谢谢。

我已经把它放在了footer.php中

<script>
//$('a.image:link').prepend('<span class="roll"></span>');
$('.gallery-icon a:link').each(function() 
     $(this).prepend('<span class="roll"></span>');
     // OR
     //$(this).wrapInner('<span class="roll"></span>');
);
</script>

<script>
$(function() 
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");

// ON MOUSE OVER
$(".roll").hover(function () 

// SET OPACITY TO 70%
$(this).stop().animate(
opacity: .7
, "slow");
,

// ON MOUSE OUT
function () 

// SET OPACITY BACK TO 50%
$(this).stop().animate(
opacity: 1
, "slow");
);
);
</script>

这在 css 中。

span.roll 
    background:url(images/zoom.png) center center no-repeat #000;
    height: 120px;
    position: absolute;
    width: 150px;
    z-index: 7000;
    -webkit-box-shadow: 0px 0px 4px #ff0066;
    -moz-box-shadow: 0px 0px 4px  #ff0066;
    box-shadow: 0px 0px 4px  #ff0066;

当我从我的 webdeveloper 查看代码时，它看起来像这样：

这就像 wordpress 覆盖了我所有的 css 等等。

【参考方案1】：

如何使用 jQuery 将跨度附加（前置）到您的链接？ 没有看到你的代码，这里有一个小预告

$('.IMAGELINK').each(function() 
     $(this).prepend('<span class="roll"></span>');
     // OR
     $(this).wrapInner('<span class="roll"></span>');
);

禁用 javascript 后，缩放功能将被禁用 所以这个跨度不会被添加到代码中。

【讨论】：

我只能将 span 类放入 img-tags 中：s

将跨度放置在应有的位置，现在我只是想知道为什么它对 css 没有反应.. 不过谢谢！ :-)

你将不得不发布你的代码，以便让我们更好地了解它是如何出现在你的页面上的，这样我/我们就可以更好地决定如何解决这个问题，M。 .. 啊很好 1 刚刚看到您的更新，...发布您的代码.. :) 只需编辑您的原始问题以包含代码块。

现在一切正常。非常感谢您的帮助:-)