圖片替換腳本（jQuery）

我正在構建員工的BIOS頁面，客戶希望選定的縮略圖以完全不透明的顏色顯示，而所有其他人以黑白的較低不透明度顯示。這並不難 - 麻煩的是，每個縮略圖必須具有顏色狀態和黑白狀態。所以我的下一個想法是在鼠標懸停上換出黑白圖像（這將在彩色背景圖像中的div內休息）。圖片替換腳本（jQuery）

$('.thumbnail').mouseenter(function(){ 
    var current = $(this); // cache thing 
    var thishtml = current.html(); // get contents of thing 
    current.html('').mouseleave(function(){ //empty the thing 
     current.html(thishtml); //put the variable back in the thing 
     }); 
});

我的HTML將如下所示：

<div class = "thumbnail" style = "background-image: url(color.jpg);"> 
<img src="blackandwhite.jpg" /> 
</div>

很顯然，因爲我問這個問題，我的想法沒有工作。 mouseover刪除了innerHTML，並且該變量已成功轉換，但它不會再次插入到DIV中。我錯過了什麼？

來源

2011-08-18 Adam Holwerda

而不是交換HTML使用CSS。

CSS：

.hidden { 
    visibility:hidden 
}

JS：

$(".thumbnail").hover(
    function() { 
    $(this).find('img').addClass('hidden') 
    }, 
    function() { 
    $(this).find('img').removeClass('hidden') 
    } 
);

來源

2011-08-18 15:25:46

這很完美，謝謝。 –

太好了。點擊左邊的複選標記，將其選爲接受的答案。我們都得到了重點。 –

嘗試使用.show（）和hide（）使blackandwhite.jpg圖像分別可見和隱藏。

$(".thumbnail").hover(
    function() { 
    $(this).children("img").hide(); //hide b and w on mouse in 
    }, 
    function() { 
    $(this).children("img").show(); //showb and w on mouse out 
    } 
);

來源

2011-08-18 15:24:03

如果「縮略圖」不有一個定義的寬度和高度，隱藏IMG將使整個DIV消失，因爲它沒有內容。 –

當你清空html就沒有什麼，你的mouseleave事件將觸發設置html回來。

工作demo。在這個演示中，我只是設置一個角色顯示，你可以看到事件被觸發，刪除角色，它不會工作。

來源

2011-08-18 15:25:06 ShankarSangoli

你不需要任何JavaScript來做到這一點，只是一塊CSS的：

div.thumbnail { 
    background-image: url(blackandwhite.jpg); 
    opacity: 0.7; 
} 
div.thumbnail:hover { 
    background-image: url(color.jpg); 
    opacity: 1; 
}

來源

2011-08-18 15:25:54

爲什麼不嘗試使用顯示和隱藏方法？一定要爲包含的div指定一個寬度，否則整個事物在隱藏或顯示時會消失。我猜縮略圖大小相同，所以這將是容易添加CSS比如：

CSS：

.thumbnail 
{ 
    width: 100px; 
    height; 100px; 
}

的Javascript

$(document).ready(function() 
{ 
    $('img', '.thumbnail').hide();//Start off hidden 
    $('.thumbnail').mouseenter(function() 
    { 
     $('img', this).show(); 
    }); 
    $('.thumbnail').mouseleave(function() 
    { 
     $('img', this).hide(); 
    }); 
});

來源

2011-08-18 15:27:14 Kyle

圖片替換腳本（jQuery）

回答

相關問題