<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>menu </TITLE>
</HEAD>
<style>
body{
padding-top:200px
text-align:center
font-size:13px
}
#content{
margin:0 auto
text-align:left
width:720px
background:orange
background-color:black
}
ul{
margin-top:1px
list-style:none
}
#father li{
float:left
position:relative
margin-right:10px
width:120px
text-align:center
border:1px solid black
border-bottom:none
}
#father li a:link,#father li a:visited{
line-height:30px
color:darkred
font-weight:bold
}
#father li ul *{
float:none
margin-right:0px
padding:0
color:none
width:90px
background-color:orange
border:none
}
.child{
position:absolute
top:29px
right:0px
display:none
}
#father li ul li a:link,#father li ul li a:visited{
margin:1px
color:blue
text-decoration:none
font-weight:normal
line-height:20px
}
#father li ul li a:hover{
background-color:white
}
</style>
<script>
function showMenu(emt,id1,id2){
document.getElementById(id1).style.textDecoration = "none"
document.getElementById(id1).style.color = "white"
document.getElementById(id2).style.display = "block"
emt.style.backgroundColor = "orange"
emt.style.borderColor = "white"
}
function hiddenMenu(emt,id1,id2){
document.getElementById(id1).style.textDecoration = "underline"
document.getElementById(id1).style.color = "darkred"
document.getElementById(id2).style.display = "none"
emt.style.backgroundColor = "black"
emt.style.borderColor = "black"
}
</script>
<BODY>
</table>
<div id="content">
<ul id="father">
<li onmouseover="showMenu(this,'a1','ul1')" onmouseout="hiddenMenu(this,'a1','ul1')">
<a id="a1" href="#">主页</a>
<ul id="ul1" class="child">
<li><a href="#">文字测试</a></li>
<li><a href="#">使用中文字符</a></li>
<li><a href="#">你看可以吗</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a2','ul2')" onmouseout="hiddenMenu(this,'a2','ul2')">
<a id="a2" href="#">程序设计</a>
<ul id="ul2" class="child">
<li><a href="#">JAVA</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">C#.NET</a></li>
<li><a href="#">游戏开发</a></li>
<li><a href="#">汇编</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a3','ul3')" onmouseout="hiddenMenu(this,'a3','ul3')">
<a id="a3" href="#">网页技术</a>
<ul id="ul3" class="child">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a4','ul4')" onmouseout="hiddenMenu(this,'a4','ul4')">
<a id="a4" href="#">动态网页</a>
<ul id="ul4" class="child">
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a5','ul5')" onmouseout="hiddenMenu(this,'a5','ul5')">
<a id="a5" href="#">关于我</a>
<ul id="ul5" class="child">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>
<div>
</BODY>
</HTML>
根据测试结果disbled状态下文字颜色是可控的。示例代码如下：
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试页面</title>
</head>
<body>
<style type="text/css">
.test{color:red}
</style>
<input class="test" disabled="disabled" value="调整disaled内容样式">
</body>
</html>
代码最终执行效果如下图：
::before，::after是伪元素并非doom元素，所以jquery无法选择伪元素。
如果确实需要实现修改伪元素的样式，可以通过下面的例子。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>pseudo-elements test by zhou2003737</title>
<style type="text/css">
p{
color: deepskyblue
}
p:before{
content: attr(data-beforeContent)
color: darkred
}
</style>
</head>
<body>
<p data-beforeContent="测试">1111</p>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
<!--使用jquery1.8之前版本 click方法更改为toggle-->
var times = 0
$('p').on('click',function(){
switch (times){
case 0:
$(this).attr('data-beforeContent','你说啥都是对的')
times++
break
case 1:
$(this).attr('data-beforeContent','你这么叼咋不上天呢')
times++
break
case 2:
$(this).attr('data-beforeContent','那就上天吧')
times++
break
default :
times =0
$(this).attr('data-beforeContent','你说啥都是对的')
times++
break
}
})
})
</script>
</html>
