Question

我正在努力获得此处显示的效果https://www.kogevitamins.com/

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

感谢。

编辑：

现在我有

for HTML

    <img src="/images/pill.png" alt="description" 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" alt="description"  />
<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;
}

Answer 1

您好您可以通过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... */  }

这就是全部！

Answer 2

您应该可以使用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 }); });

Answer 3

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

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

Answer 4

除非您想透过这些图像并显示背景图案，否则无需处理不透明度。

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

但是你只需在所选图像上方放置一个1像素半透明背景的div即可达到同样的效果。

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

Answer 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/

Answer 6

在您引用的具体示例中，它们使用了CSS3过渡。请参阅此处获取教程：http://www.w3schools.com/css3/css3_transitions.asp

简而言之，使用这些可以在没有任何javascript的情况下完成所有类型的时髦效果。现代浏览器支持CSS3（但随着Web技术的发展，它已经非常先进）并且还不是W3C标准。

Answer 7

此代码应该执行您想要执行的操作（我根据您的HTML对其进行了测试）：

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

Answer 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);;
});

编辑：在我输入此回复时看起来你正常工作

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

8 个答案: