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

Question

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

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

谢谢。

编辑:

我现在有

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

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