当鼠标悬停在jquery上时,图像不会变得不透明

Image wont become non-opaque when hovered over jquery

本文关键字:不透明 图像 悬停 鼠标 jquery 上时      更新时间:2023-09-26

我需要这两个图像在悬停时淡入,在未悬停时淡出。我找了好几个小时了,但什么都没找到。

个人简历:

<script>
    $(document).ready(function(){
        $("#tut_select").mouseenter(function(){
            $(".tut_select").css("opacity","1");
        });
        $("#tut_select").mouseleave(function(){
            $(".tut_select").css("opacity",".8");
        });
    });
</script>

页面:http://pinkpencil.x10.mx/tutorials.php

这里有一个小提琴:http://jsfiddle.net/PinkPencil/TwyE8/

如果没有绝对的理由使用jQuery,为什么不使用一些CSS呢?

的例子:

img.tut_select {
    opacity: 1;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
}
img.tut_select:hover {
    opacity: .8;
}

试试这个:

HTML

<div class="wrap">
    <img class="tut_select" src="./images/desktop.png">
</div>
CSS

.wrap { opacity:0 } 
.wrap:hover { opacity:1 }