在圖像精靈旁邊使用JQuery

我目前使用CSS和圖像精靈進行導航（下面的代碼）。這個工作正如預期的那樣，但是我想用淡入淡出來緩解這個過渡。在圖像精靈旁邊使用JQuery

我相信最好使用JQuery來做這件事，但是我想離開CSS來爲那些禁用Javascript的人添加支持。任何人都可以指出我如何實現這種'合作'的正確方向？！

HTML：

<ul id="menu"> 
    <li id="home"><a href="#"></a></li> 
</ul>

CSS：

nav 
{ 
    margin-top: 17px; 
    float: right; 
} 

nav #menu 
{ 
    display: block; 
    height: 22px; 
    margin: 0px; 
    padding: 0px; 
} 

nav #menu li 
{ 
    list-style-type: none; 
    float: left; 
    padding-left: 28px; 
} 

nav #menu li a 
{ 
    background: url(/Content/Images/navigation.png) no-repeat; 
    height: 22px; 
    display: block; 
} 

nav #menu #home 
{ 
    width: 53px; 
} 

nav #menu #home a:hover 
{ 
    background-position: 0 -22px; 
}

來源

2011-10-16 Jonathan

我會做兩件事情之一：

1）實驗用jQuery中的animate功能。
2）li創建包裝：

<ul> 
    <li><span class="bg-image" /><a href="#"></li> 
</ul>

然後使用jQuery像這樣：

$(document).ready(function() { 
    $("#menu li a").bind("mouseover", function() { 
     $(this).siblings("span.bg-image").css("background", "url(URL TO IMAGE)").hide().fadeIn(100); 
    }) 
});

重複，並使用不熱圖像鼠標移開。我假設你會使用一個透明的佔位符類型的圖像的不熱狀態，確保寬度/高度是相同的熱類。

來源

2011-10-16 01:25:05 Sam

將課程添加到機身，並在打開後用javascript將其刪除。

<body class="nojs"> 
<script>$("body").removeClass("nojs").addClass("js")</script>

現在在CSS，你可以爲每個人添加任何規則，而不JavaScript的

.nojs #boton1:hover {background: url(navigation.png) no-repeat;}

而且只爲人們創建規則的JavaScript激活

.js #boton1 {}

來源

2011-10-16 02:00:47

在圖像精靈旁邊使用JQuery

回答

相關問題