悬停链接以更改图像的不透明度

Posted 2023-03-06

【中文标题】悬停链接以更改图像的不透明度

【英文标题】：Hover link to change opacity of image

【发布时间】：2013-06-25 10:35:22

【问题描述】：

我正在尝试获得这里显示的效果https://www.kogevitamins.com/

您将鼠标悬停在“了解更多”链接上以使图像的不透明度也发生变化。

谢谢。

编辑：

我现在有

html

    <img src="/images/pill.png"  id ="image" />
<p> Daily Essentials </p>
<a id ="button"  href="#">Learn More</a>

对于jquery

    $("#button").hover(function()
    $("#image").animate(opacity:1,300);
).mouseout(function()
    $("#image").animate(opacity:0.6,300);;
);

目前看来还不行

编辑：

我最近更新了以下代码，但悬停效果对我不起作用。这是我要开始工作的链接http://maninkorean.com/

<div class ="product-content">
<img class="imgClass" src="/images/pill.png"   />
<p> Daily Essentials </p>
<a id ="button"  href="#">Learn More</a>
</div>

 $("a#button, img").hover(function()
    $("img.imgClass").animate(opacity:1,300);
).mouseout(function()
    $("img.imgClass").animate(opacity:0.6,300);;
);

img.imgClass
    opacity: 0.6


#button 
    padding: 10px 24px;
    background:#F15951;
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color:white;
    margin-top:50px;
    margin-bottom:50px;
    font-weight: bold;

【参考方案1】：

您应该能够使用 jQuery 和以下代码来做到这一点：

$('#id of link you want to use to change opacity').hover(function()  $('#id of image that you want to change opacity of').css( 'opacity' : 0.25 ); );

【讨论】：

我不认为这会在两个不同的不透明图像之间提供一个很好的“淡入淡出”效果，虽然......可能必须以某种方式集成 JQuery 的 fade() 方法。

是的，你当然可以修改它来使用jQuery的fadeIn和fadeOut。 API 在这里：api.jquery.com/fadeIn

嗨，我认为这是我正在寻找的东西。我想知道我是否可以使用 class 而不是 id 还是必须是 id？

【参考方案2】：

结合 JQuery 和 CSS3 的不透明度功能，将“OnHover”事件连接到更改所述图像不透明度的图像。

http://www.css3.info/preview/opacity/

【参考方案3】：

除非你想看透那些图像并显示背景图案，否则不需要处理不透明度。

即使您可以准备半透明版本的图像并在onMouseOver 事件中更改src 属性。

但是你可以通过简单地在所选图像上方放置一个具有 1 像素半透明背景的 div 来实现相同的效果。

使用 CSS 不透明度将切断旧浏览器。

【参考方案4】：

您好，您可以通过 css 轻松做到这一点，如下所示：

.img opacity:0.4; /*some more css*/     /* (opacity:) is now supported by all browsers */
.img:hover opacity:0.98;  /* Some more css be creative... */  

就是这样！

【参考方案5】：

这里有一些 html、css、jquery 展示了如何做到这一点：

<div></div><a>Hover On Me</a>

div
    width:300px;
    height:300px;
    display:block;
    background:red; 
    opacity: 0.6


a
    display:block;
    margin-top:20px;
    width:100px; 
    padding:5px;
    height:20px; border-radius:5px; 
    background:yellow;


$("a").hover(function()
    $("div").animate(opacity:1,300);
).mouseout(function()
    $("div").animate(opacity:0.6,300);
);

http://jsfiddle.net/Rd5Yy/2/

【讨论】：

如何添加类或 id 以使其更具体？

好的，我用你的代码为你做了另一个小提琴......我向你展示了 id、class 以及使用 jquery 选择器进行选择的不同方法。如果您感到困惑，请告诉我。 jsfiddle.net/94sqc/1

感谢您的回复，我对代码进行了编辑并链接到该站点以获取更多信息。 “了解更多”的悬停效果对我不起作用。另外我正在使用drupal 7，我认为它应该带有jquery。

是的，Drupal 应该带有 JQuery。你能确保你的选择器正常工作吗？确保您选择的是 id、class、tag 或其他...也许可以复制我的代码并进行测试？

这是你的代码的另一个小提琴：jsfiddle.net/gytYS。您的代码运行良好。我只添加了文档加载的JQuery函数($(function())。也许你没有那个。看我的jquery在fiddle中尝试一下。

【参考方案6】：

看起来在您引用的具体示例中，他们使用了 CSS3 过渡。教程见这里：http://www.w3schools.com/css3/css3_transitions.asp

简而言之，使用这些你可以在没有任何 javascript 的情况下制作各种时髦的效果。 CSS3 受到现代浏览器的支持（但随着网络技术的发展而变得非常先进），并且还不是 W3C 标准。

【参考方案7】：

这段代码应该做你想做的事（我用你的 HTML 测试过）：

$(document).ready(function() 
    $("#button").hover(function()
        $("#image").animate(opacity:0.6,300);
    ).mouseout(function()
        $("#image").animate(opacity:1,300);;
    );
);

【讨论】：

您可以编辑它以使用 .classname 而不是 #id 来做类

【参考方案8】：

好的，我刚刚查看了您的页面。首先，看起来 jQuery 无法通过您网站上的 $ 工作，因此您需要解决该问题，或者通过 jQuery 使用它。我将此代码粘贴到您网站的 JavaScript 控制台上，它可以工作：

jQuery("a#button, img").hover(function()
    jQuery("img.imgClass").animate(opacity:1,300);
).mouseout(function()
    jQuery("img.imgClass").animate(opacity:.6,300);;
);

编辑：看起来你在我输入这个回复时让它工作了