87,910
社区成员
发帖
与我相关
我的任务
分享求助，JQuery改变Hover的链接颜色
<a href="javascript:void(0)" id="EnPanel" class="languageEn">English</a>
/
<a href="javascript:void(0)" id="CnPanel" class="languageCn">中文</a>
我的目的是点击了EnPanel，CnPanel的hover颜色为 #6AB5FF，相反，点击了CnPanel，EnPanel的hover颜色为 #6AB5FF，用JQuery控制。
JS代码如下：
<script type="text/javascript">
$(document).ready(function(){
//切换至英文
$("#EnPanel").click(function(){
$("#contentCNDiv").fadeOut("slow",function(){
$("#contentENDiv").fadeIn("slow",function(){
$("#title").html("My Resume");
})
});
alert("000")
/* css */
$("#EnPanel a").hover(
function(){
$(this).css("color","#D7D7D7");
},
function(){
$(this).css("color","#D7D7D7");
}
);
$("#CnPanel a").hover(
function(){
$(this).css("color","#6AB5FF");
},
function(){
$(this).css("color","#D7D7D7");
alert("111");
}
)
});
//切换至中文
$("#CnPanel").click(function(){
$("#contentENDiv").fadeOut("slow",function(){
$("#contentCNDiv").fadeIn("slow",function(){
$("#title").html("我的简历");
})
})
/* css */
$("#EnPanel a").hover(
function(){
$(this).css("color","#6AB5FF");
},
function(){
$(this).css("color","#D7D7D7");
}
);
$("#CnPanel a").hover(
function(){
$(this).css("color","#D7D7D7");
},
function(){
$(this).css("color","#D7D7D7");
alert("222");
}
)
})
})
</script>
alert("000")打印出来了，alert("111");和alert("222");都装死，页面也没效果，hover没变，求助，哪里写错了，还是JQuery1.5不支持这种写法？该怎么改？
...全文
请发表友善的回复…
发表回复
CoffeePhoton 2011-05-02
- 打赏
- 举报
[Quote=引用 4 楼 zell419 的回复:]
$("#CnPanel a") 你这里就错了 。
$("#CnPanel") 就是这个id为CnPanel的a标签了 。
$("#CnPanel a") 这个的意思id为CnPanel的所有后代a标签 。
[/Quote]
非常感谢，完全正确，我才学JQuery，呵呵，有的地方不大清楚。
$("#CnPanel a") 你这里就错了 。
$("#CnPanel") 就是这个id为CnPanel的a标签了 。
$("#CnPanel a") 这个的意思id为CnPanel的所有后代a标签 。
[/Quote]
非常感谢，完全正确，我才学JQuery，呵呵，有的地方不大清楚。
zell419 2011-05-02
- 打赏
- 举报
$("#CnPanel a") 你这里就错了 。
$("#CnPanel") 就是这个id为CnPanel的a标签了 。
$("#CnPanel a") 这个的意思id为CnPanel的所有后代a标签 。
$("#CnPanel") 就是这个id为CnPanel的a标签了 。
$("#CnPanel a") 这个的意思id为CnPanel的所有后代a标签 。
CoffeePhoton 2011-05-02
- 打赏
- 举报
[Quote=引用 2 楼 zell419 的回复:]
应该是哪里逻辑错了 。
感觉写的复杂了 。
可以的话把html也贴出来 。
[/Quote]
这里是个例子：
应该是哪里逻辑错了 。
感觉写的复杂了 。
可以的话把html也贴出来 。
[/Quote]
这里是个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Resume</title>
<style type="text/css">
<!--
body {
background-image: url('./deepblue.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px;
padding: 0px;
}
#LanguageDiv{
margin-top: 300px;
margin-left: 200px;
width: 720px;
color: #D7D7D7;
font-size: 12px;
text-align: right;
border-bottom: 1px solid #919191;
}
#contentENDiv {
margin-left: 200px;
padding-top: 0px;
width: 600px;
height: 1500px;
color: #EFAA65;
font-size: 22px;
line-height: 30px;
}
#contentCNDiv {
margin-left: 200px;
padding-top: 0px;
width: 600px;
height: 1500px;
color: #EFAA65;
font-size: 22px;
line-height: 30px;
display: none;
}
/* English */
a.languageEn:link{
color: #D7D7D7;
text-decoration: none;
}
a.languageEn:visited{
color: #D7D7D7;
text-decoration: none;
}
a.languageEn:hover{
color: #D7D7D7;
text-decoration: none;
}
a.languageEn:active{
color: #D7D7D7;
text-decoration: none;
}
/* 中文 */
a.languageCn:link{
color: #D7D7D7;
text-decoration: none;
}
a.languageCn:visited{
color: #D7D7D7;
text-decoration: none;
}
a.languageCn:hover{
color: #D7D7D7;
text-decoration: none;
}
a.languageCn:active{
color: #D7D7D7;
text-decoration: none;
}
-->
</style>
<script type="text/javascript" src="./jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//切换至英文
$("#EnPanel").click(function(){
$("#contentCNDiv").fadeOut("slow",function(){
$("#contentENDiv").fadeIn("slow",function(){})
});
if($("#title").html() != "My Resume"){
$("#title").fadeOut("slow",function(){
$("#title").html("My Resume");
$("#title").fadeIn("slow",function(){})
})
}
/* css */
$("#EnPanel a").hover(
function(){
$(this).css("color","#D7D7D7");
},
function(){
$(this).css("color","#D7D7D7");
}
);
$("#CnPanel a").hover(
function(){
$(this).css("color","#6AB5FF");
},
function(){
$(this).css("color","#D7D7D7");
alert("111");
}
)
});
//切换至中文
$("#CnPanel").click(function(){
$("#contentENDiv").fadeOut("slow",function(){
$("#contentCNDiv").fadeIn("slow",function(){})
});
if($("#title").html() != "我的简历"){
$("#title").fadeOut("slow",function(){
$("#title").html("我的简历");
$("#title").fadeIn("slow",function(){})
})
}
/* css */
$("#EnPanel a").hover(
function(){
$(this).css("color","#6AB5FF");
},
function(){
$(this).css("color","#D7D7D7");
}
);
$("#CnPanel a").hover(
function(){
$(this).css("color","#D7D7D7");
},
function(){
$(this).css("color","#D7D7D7");
alert("222");
}
)
})
})
</script>
</head>
<body>
<div id="LanguageDiv">
<a href="javascript:void(0)" id="EnPanel" class="languageEn">English</a>
/
<a href="javascript:void(0)" id="CnPanel" class="languageCn">中文</a>
</div>
<!-- English -->
<div id="contentENDiv">
English English English
</div>
<!-- 中文 -->
<div id="contentCNDiv">
中文 中文 中文
</div>
</body>
</html>
zell419 2011-05-02
- 打赏
- 举报
应该是哪里逻辑错了 。
感觉写的复杂了 。
可以的话把html也贴出来 。
感觉写的复杂了 。
可以的话把html也贴出来 。
