如何让悬停/鼠标悬停效果保持选定状态？

当谈到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

如何让悬停/鼠标悬停效果保持选定状态？

回答

相关问题