3

我正在尝试获得此处显示的效果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;
}
4

8 回答 8

1

这里有一些 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/

于 2013-06-27T19:32:01.740 回答
1

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

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

于 2013-06-27T19:38:51.487 回答
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... */  }

就这样！

于 2013-06-27T19:21:41.197 回答
1

You should be able to do this using jQuery with the following code:

$('#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 }); });
于 2013-06-27T19:22:45.250 回答
1

Combine JQuery and CSS3's opacity features to wire up an "OnHover" event to the images that changes the opacity of the said image.

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

于 2013-06-27T19:22:53.427 回答
1

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

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

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

使用 CSS opacity 将切断旧浏览器。

于 2013-06-27T19:23:22.840 回答
1

这段代码应该做你想做的事情（我对你的 HTML 进行了测试）：

$(document).ready(function() {
    $("#button").hover(function(){
        $("#image").animate({opacity:0.6},300);
    }).mouseout(function(){
        $("#image").animate({opacity:1},300);;
    });
});
于 2013-06-27T22:16:18.017 回答
1

好的，我刚刚查看了您的页面。首先，看起来 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);;
});

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

于 2013-06-28T15:16:53.540 回答