在提供帮助之前,我知道 CSS 更容易,但请不要提供 CSS 解决方案,因为我被告知只能接触 .js 文件。
我不确定我的代码中有什么问题,因为我在网上搜索过,这是我认为我的代码中应该有的内容,但是我的图像根本没有我想要的不透明度和持续时间效果拥有它。
以下是与 javascript 相关的 HTML 部分:
<div id="content">
<div id="myCols" class="container">
<div class="col1">
<img src="images/boxImage1.jpg" class="imageCS"/>
</div>
<div class="col2">
<img src="images/boxImage2.png" class="imageCS"/>
</div>
<div class="col3">
<img src="images/boxImage3.jpg" class="imageCS"/>
</div>
</div>
</div>
这是我键入的 JavaScript:
$(document).ready(function()
{
$("imageCS").hover(function()
//hover over opacity 30% at 0.5 sec
$(this).stop().animate({opacity: "0.3"}, "0.5");
),
function()
(
//hover out opacity 100% at 1 sec
$(this).stop().animate({opacity: "1"}, "1");
)
});
我不确定出了什么问题,因为效果甚至没有发生。
最佳答案
您选择的元素中缺少
.
,您可以使用 mouseover
和 mouseout
。
$('.imageCS').mouseover(function(){
$(this).css('opacity','.2');
}).mouseout(function(){
$(this).css('opacity','1');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/350x150" class="imageCS"/>
如果您想使用悬停
,请参阅以下代码片段:
$('.imageCS').hover(
function () {
$(this).css('opacity','.2');
},
function () {
$(this).css('opacity','1');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/350x150" class="imageCS"/>
调用 $( 选择器 ).hover( handlerIn, handlerOut ) 是以下形式的简写: $( 选择器 ).mouseenter( handlerIn ).mouseleave( handlerOut );
检查文档 Here .
关于javascript - jQuery/javascript 中图像的悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42207573/