我如何獲得：懸停狀態以便jCarousel箭頭可以工作？

我正在使用jQuery「jCarousel」插件來創建NFL球員照片的輪播。除了傳送帶中的下一個/前一個箭頭，一切都很好。他們不響應我爲他們的懸停狀態創建的CSS規則。我如何獲得：懸停狀態以便jCarousel箭頭可以工作？

下面是用HTML和CSS只舉一個例子頁面：http://www.joshrenaud.com/pd/picks/jCarouselProblem.html

爲箭頭的樣式規則正常工作：

.jcarousel-skin-tango .jcarousel-next-horizontal { 
    opacity: 0.6; 
    position: absolute; 
    top: 10px; 
    right: 0px; 
    width: 20px; 
    height: 135px; 
    cursor: pointer; 
    background: transparent url(graphics/right-arrow.png) no-repeat 0 0; 
    }

但懸停狀態中的樣式規則不：

.jcarousel-skin-tango .jcarousel-next-horizontal:hover { 
    opacity: 1; 
    }

我試着用Firebug弄清楚發生了什麼，但我仍然空着。它告訴我它知道：列表元素的懸停樣式。但是當我檢查箭頭時，就好像：懸停規則不適用於這些元素。

來源

2011-04-15 Kirkman14

它爲我的罰款。你在IE6中測試嗎？ – alex 2011-04-15 00:51:59

不，我在Firefox 4測試。編輯：在閱讀您的評論後，我檢查了其他瀏覽器。它在Safari和Chrome中正確運行，但不是Firefox 4. – Kirkman14 2011-04-15 00:55:02

這是因爲你沒有包含典型的樣板HTML。您的頁面正在渲染Quirks Mode。

如果添加了這樣的事情：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
</body> 
</html>

和插槽您的代碼的其餘部分，它應該去的，它會工作。

這裏有一個以前的答案我寫了其中的問題是同樣的事情：

CSS Hover+Background Image

來源

2011-04-15 00:56:03 thirtydot

你是對的。我是一個白癡。任何想法爲什麼其他懸停狀態工作正常（在列表項上）？ – Kirkman14 2011-04-15 00:58:18

原因在於我鏈接到的文檔中：在Firefox「Quirks Mode」中：除非選擇器包含標籤名稱，ID或屬性，否則懸停僞類只應用於鏈接，圖像和表單控件。 – thirtydot 2011-04-15 01:04:56

+1容易忘記doctype有時:) – alex 2011-04-15 01:08:25

我如何獲得：懸停狀態以便jCarousel箭頭可以工作？

回答

相關問題