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

如果您想使用hover，请参阅以下代码段：

 $('.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"/>

调用$（selector）.hover（handlerIn，handlerOut）是以下的简写： $（selector）.mouseenter（handlerIn）.mouseleave（handlerOut）;

检查文档Here。

在jQuery / javascript中悬停在图像上的效果

1 个答案: