Question

我有一个按钮，在页面加载时显示“显示内容”，点击后，内容显示，并切换到“隐藏内容”按钮。根据我的代码，这很好用。

$('div.content').hide();

$('img.contentslide').click(function() {
    $('div.content').toggle(1500,function() {
        if (jQuery.browser.msie) {                          // Lines 15-17 = special treatment for IE, because of  
            this.style.removeAttribute('filter');           // lack of support for ClearType font rendering on items
        }                                                   // being toggled in jQuery.
    });
        if (slideState == 'closed') {
            $('img.contentslide').attr('src','images/hidecontentstd.png');
            slideState = "open";    

        } else {
            $('img.contentslide').attr('src','images/showcontentstd.png');
            slideState = "closed";
        }
});

使用slideState作为我的布尔变量，在DOM就绪时设置为关闭。

我遇到的问题是将鼠标悬停在那里，以便当用户将鼠标悬停在按钮上时会显示RELEVANT悬停图像（即当slideState打开时隐藏内容悬停并且当slideState关闭时显示内容悬停）

我尝试过这样做：http://www.foryourlungsonly.net/2007/10/jquery-image-swap/

但没有运气。我不想使用CSS徘徊。

Answer 1

您可以使用.click()但选择.hover()事件选择正确的图片时执行相同的操作。

$('img.contentslide').hover( function() {
        if (slideState == 'closed') {
            $( this ).attr('src','images/closedHover.png');
        } else {
            $( this ).attr('src','images/openHover.png');
        }
    },
    function() {
        if (slideState == 'closed') {
            $( this ).attr('src','images/closedNoHover.png');
        } else {
            $( this ).attr('src','images/openNoHover.png');
        }
    }
);

“隐藏内容显示内容”图像悬停

1 个答案: