如何將懸浮顏色應用於多個元素？

我有幾個列表顯示爲行內塊，創建行的幻覺。與表格不同，我無法直接格式化行。我想在一個懸停時應用背景顏色到行中的每個< li>。這是可能的通過CSS和名稱/ ID？如何將懸浮顏色應用於多個元素？

謝謝。

邁克

澄清：閱讀的答案後，我意識到我的問題是不清楚。我有3個列表並排，因此每個列表中的第一個< li>代表第一行。每個列表中的第二個< li>將是第二行。等等。

來源

2009-07-19 Mike

這聽起來像你試圖與列表元素而不是表。你有沒有理由不使用表格？ – jimyi 2009-07-19 21:34:31

我也有同樣的問題。爲什麼不使用表格元素？ – pegasus4747 2009-07-19 22:43:45

跨瀏覽器支持使用jQuery：

CSS：

li:hover { background-color: #F00 }

而對於IE6 - 因爲它不支持：懸停在任何東西，但<一個>元素僞類 - 你服務於它在你的IE6特有的樣式表和腳本如下：

CSS：

li.hover { background-color: #F00 }

個

JS：

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

來源

2009-07-19 20:26:21

我幾乎給你一個-1，但後來我意識到你在得到什麼，所以讓我明確地爲其餘的類說明：IE6只支持懸停在錨（a）元素，而不是列表項（li）。 – 2009-07-19 23:16:51

不知道如果我理解正確，但是這還算簡單的解決方案應該做的伎倆：

li:hover { 
    background-color: pink; 
}

有些瀏覽器不支持懸停僞類，但是。

來源

2009-07-19 20:22:43

看起來像你不正確地理解這個問題:) – Kamarey 2009-07-19 20:58:59

如果你想樣式應用到特定<ul>的所有子元素，你可以使用bigmattyh的做法，但設置類的<ul>而不是<li>。

然後，添加CSS樣式像這樣：

.hover li { /* some styles */ }

使用這種方法，您可以將樣式應用於所有子<li>元素，但你只需要在父<ul>事件處理程序，使您的代碼運行得更快。

來源

2009-07-19 20:37:03

我會簡化事情並重新組織您的HTML，以便每個UL是一行而不是一列。

<html> 
<head> 
<style> 
    ul { clear: both; } 
    ul li { 
    float: left; 
    list-style: none; 
    padding: 5px 10px; 
    border: 1px solid white; } 
    .hover { background-color: red; } 
</style> 
</head> 
<body> 
    <div id='list-container'> 
    <ul class="hover"> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
    </ul> 
    <ul> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
    </ul> 
    <ul> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
    </ul> 
    </div> 
</body> 
</html>

而且JS：

$(document).ready(function() { 
    var alterRow = function(container, class, toggleOn) { 
    $(container).children().each(function(i, node) { 
     if (toggleOn) { 
     $(node).addClass(class); 
     } else { 
     $(node).removeClass(class); 
     } 
    }); 
    }; 

    $("#list-container ul").each(function(i, node) { 
    $(node).hover(
     function() { alterRow(node, "hover", true); }, 
     function() { alterRow(node, "hover", false); } 
    ); 
    }); 
});

你可以看到，在這裏編輯：http://jsbin.com/ewijo

來源

2009-07-19 23:55:54

如何將懸浮顏色應用於多個元素？

回答

相關問題