Question

我有一些图像链接可以通过jquery改变翻转时的不透明度。我还想在单击它们时更改“非活动”图像的不透明度，并删除上一图像的活动类。也许有些代码可以证明：

HTML：

<div style="width:940px; text-align:center; padding-bottom:10px;">
    <a href="#" class="nobase" onClick='jQuery("#youtube-player-container").tubeplayer("play", "adI8ZRzjnlE");'>
        <img class="active"  src="images/video_thumbs/003.jpg" width="300" height="167" alt="La Vie en Couleur">
    </a>
    <a href="#" class="nobase" onClick='jQuery("#youtube-player-container").tubeplayer("play", "5L1vrwEvP-c");'>
        <img class="inactive" src="images/video_thumbs/001.jpg" width="300" height="167" alt="A Holiday Video">
    </a>
    <a href="#" class="nobase" onClick='jQuery("#youtube-player-container").tubeplayer("play", "ijfgzId6jdI");'>
        <img class="inactive"   src="images/video_thumbs/002.jpg" width="300" height="167" alt="La Vie en Couleur">
    </a>
</div>

Jquery的

<script type="text/javascript">
    $(document).ready(function() {
        $("img.inactive").hover(function() {
            $(this).stop().animate({
                "opacity": "1"
            }, "slow");
        }, function() {
            $(this).stop().animate({
                "opacity": "0.6"
            }, "slow");
        });
    });
</script>

的CSS：

.inactive {opacity:0.6;}
.active {opacity:1.0;}

所以基本上它在滚动时做了我想做的事情，但我也希望在点击时切换活动类。

Answer 1

我认为你可以在普通的CSS中完成大部分工作

selector:hover{}

selector:active{}

或者你可以这样做

$('elm').bind({'click':action,'hover':action});

function action(e){
 $(e.currentTarget).doSomething();
}

Answer 2

根据我的理解，你想改变课程。您可以在两个悬停功能中使用：

element.toggleClass('className')

或者，您可以显式删除或包含所需的类：

element.removeClass('className')
element.addClass('className')

我希望这就是你想要的。 =]

悬停不透明度并单击不透明度

2 个答案: