如何让悬停/鼠标悬停效果保持选定状态?
问题描述:
当谈到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>
答
一般来说,你应该做这样的事情跟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:26:53
对不起 - 这是我第二次发布一个问题,并且第一次因为提供示例链接而没有提供代码,所以看看我到底有多远。如果下一次,我将格式化代码。 – 2009-10-05 17:25:50