如何讓懸停/鼠標懸停效果保持選定狀態？

當談到Javascript時，我非常喜歡初學者，並希望能爲您提供任何幫助！我在我的主頁上創建了一個功能框，其中三個標題將共享一個圖片點。我發現了一個腳本，可以在標題翻轉時更改圖像，但很難說明頁面何時打開，第一個標題與第一張圖片一起顯示。如何讓我的懸停風格顯示已被選中，然後停留在滾動的最後一個標題，所以很明顯標題與照片顯示的內容相符？下面是my example 如何讓懸停/鼠標懸停效果保持選定狀態？

這是我正在使用的代碼：

hover樣式：

a.feature:hover { 
    font-size: 0.9em; 
    font-family: "trebuchet ms", Arial, Helvetica, sans-serif; 
    color: #b0171f; 
    font-weight: bold; 
    background-image: url(../zimgart/nav/bgfeature.jpg); 
    background-repeat: no-repeat; 
    text-decoration: none; 
    padding: 5px 0 5px 10px; 
    display:block; 
}

JAVASCRIPT：

<script> 

/*Rollover effect on different image script- 
By JavaScript Kit (http://javascriptkit.com) 
Over 200+ free scripts here! 
*/ 

function changeimage(towhat,url){ 
    if (document.images){ 
     document.images.targetimage.src=towhat.src 
     gotolink=url 
    } 
} 
function warp(){ 
    window.location=gotolink 
} 
</script> 

<script language="JavaScript1.1"> 
var myimages=new Array() 
var gotolink="#" 

function preloadimages(){ 
    for (i=0;i<preloadimages.arguments.length;i++){ 
     myimages[i]=new Image() 
     myimages[i].src=preloadimages.arguments[i] 
    } 
} 


preloadimages("photos/feature1.jpg", 
       "photos/feature2.jpg", 
       "photos/feature3.jpg") 
</script>

來源

2009-10-05 Cape Gazette

你知道，自己格式化和縮進代碼本來是不錯的。 – 2009-10-05 16:26:53

對不起 - 這是我第二次發佈一個問題，並且第一次因爲提供示例鏈接而沒有提供代碼，所以看看我到底有多遠。如果下一次，我將格式化代碼。 – 2009-10-05 17:25:50

一般來說，你應該做這樣的事情跟JS代碼，最簡單的當然將會使用jQuery。使用jQuery它看起來像這樣：

$(document).ready(function(){ 
    $('A.feature').mouseover(functiond(e){ 
    $('A.feature').removeClass('a_hover'); 
    $(this).addClass('a_hover'); 
    $('#bigimage').attr('src',$(this).attr('rel')); // big image effect, just example 
    }) 
});

我假設A鏈接的屬性爲rel ='bigimageulr'。要安裝jQuery只是放在標題：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

來源

2009-10-05 16:34:31 Thinker

恐怕我不明白在哪裏放置第一個代碼，或者用什麼來代替「#bigimage」來使其工作。有推薦學習jQuery的網站嗎？ – 2009-10-05 21:05:33

我更新了代碼，你可以把它放在html的任何地方。 #bigimage是懸停鏈接的右側圖片，而#name則表示您應該將ID = bigimage設置爲屬性。 – Thinker 2009-10-06 11:11:43

*左側圖像（不是右側） – Thinker 2009-10-06 11:12:27

如何讓懸停/鼠標懸停效果保持選定狀態？

回答

相關問題