javascript - jQuery/javascript 中图像的悬停效果

Question

在提供帮助之前，我知道 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"); 
    )




});

我不确定出了什么问题，因为效果甚至没有发生。

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