호버/마우스 오버 효과를 선택 상태로 유지하는 방법은 무엇입니까?

Question

Javascript와 관련하여 초보자이며 어떤 도움을 주셔서 감사합니다! 나는 3 개의 표제가 1 개의 그림 반점을 공유 할 나의 가정 페이지에 특징 상자를 창조하고있다. 헤드 라인이 롤오버 될 때 이미지를 변경하는 스크립트를 찾았지만 첫 번째 헤드 라인이 첫 번째 사진과 함께 표시 될 때 페이지가 열리는 시점을 알기는 어렵습니다. 마우스 오버 스타일을 이미 선택한 상태로 표시하려면 무엇을해야합니까? 그리고 마지막으로 마우스를 올린 헤드 라인을 유지하십시오. 따라서 사진이 어떤 제목과 함께 표시되는지 확실하게 알 수 있습니까? 여기에 여기에 my example

내가 사용하고 코드 것입니다 :

띄운 스타일 :

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> 

Answer 1

는 일반적으로 당신이 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>