我需要動態地設置懸停BG

這裏一點點澄清是我的代碼：我需要動態地設置懸停BG

function recordStarted() { 
$("#red_button").css("background","url(stop.png)"); 
$("#red_button").css("background-repeat","no-repeat"); 

$("#red_button:hover").css("background","url(stop-hover.png)"); 
$("#red_button:hover").css("background-repeat","no-repeat"); 
}

我有div層的背景由第二線被設置，但是當我嘗試設置懸停背景，它只是成爲背景。我將如何動態設置：懸停背景？

CSS：

.red_button 
{ 
background:url(record.png); 
padding: 19px 251px; 
cursor: pointer; 
background-repeat: no-repeat; 
} 

.red_button:hover 
{ 
background:url(record-hover.png); 
cursor: pointer; 
background-repeat: no-repeat; 
}

來源

2013-03-06 Christian

你不這樣做與PHP。 – 2013-03-06 02:31:55

那我該怎麼做呢？ – Christian 2013-03-06 02:34:29

對不起，在一個PHP文件的JavaScript中的CSS。你會怎麼做呢？ – Christian 2013-03-06 02:35:27

這是jQuery的。：hover不是jQuery選擇器的一部分。你可以在CSS中做到這一點。但是如果你出於某種原因決定在jQuery中做什麼，你應該做的是將你的css的stop.png背景圖像分配給#red_button。然後添加到您的css＃red_button.hover並將其他圖像分配給它作爲背景。然後在jQuery中使用

$("#red_button").hover(function() { 
    $(this).addClass("hover"); 
    }, 
    function() { 
    $(this).removeClass("hover"); 
    }); 
});

來源

2013-03-06 02:42:07 Hacktisch

我不確定我是否按照你的例子或從別人那裏得到了它，但這正是我最終做的。感謝您的回答並抱歉，花了這麼長時間纔將您的答案標記爲正確。 – Christian 2013-06-20 23:53:48

你可以簡單地使用CSS來做到這一點：

#red_button { 
    background: "url(stop.png)"; 
    background-repeat: no-repeat; 
} 

#red_button:hover { 
    background: "url(stop-hover.png)"; 
}

來源

2013-03-06 02:36:39 Bertrand

這可以工作，除了，我已經設置了一個背景，只是簡單地改變它，但也需要改變懸停的背景。檢查編輯我的答案我的CSS代碼 – Christian 2013-03-06 02:38:00

對不起，我不知道看到的問題。如果您需要更多權重，則可以隨時添加更多選擇器，例如，如果您將類懸停添加到元素，則可以使用＃red_button.hover。 – Bertrand 2013-03-06 02:41:44

你不需要javascript來做到這一點，CSS是所有需要的。我建議使用css sprite系統，以便在按下按鈕時不需要下載第二張圖像，這可能導致在懸停圖像加載時按鈕顯示消失片刻。

從本質上講，使用CSS Sprites時，您將擁有一個圖像，該圖像既包含相鄰的默認狀態也包含懸停狀態，則該按鈕將像窗口一樣操作，從而使用background-position CSS將圖像的正確部分移動到視圖中財產取決於國家。

（我知道所有人都痛恨W3Schools的，但這是一個基本的概念，一個很好的教程）

看看下面的教程，以瞭解更多關於CSS spiriting。

http://www.w3schools.com/css/css_image_sprites.asp

來源

2013-03-06 02:55:32 Neaox

我需要動態地設置懸停BG

回答

相關問題