css问题：鼠标经过文字的时候，文字和背景同时变换？
css问题：鼠标经过文字的效果，文字和背景同时变换？就是背景层中套了一个文字层，要让鼠标经过文字的时候，文字和背景同时变换？该怎么写？本人菜鸟...
css问题：鼠标经过文字的效果，文字和背景同时变换？
就是背景层中套了一个文字层，要让鼠标经过文字的时候，文字和背景同时变换？该怎么写？本人菜鸟 展开
就是背景层中套了一个文字层，要让鼠标经过文字的时候，文字和背景同时变换？该怎么写？本人菜鸟 展开
4个回答
展开全部
用js来实现
<!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>test</title>
<style type="text/css">
#context{width:200px;height:100px;background:#F60;color:#fff;}
a#hook{background:#669;width:80px;height:50px;line-height:50px;display:block;}
#wrapper .jschange{background:#CC0}
#wrapper .jschange a#hook{background:#999}
</style>
<script type="text/javascript">
function change(){
var con=document.getElementById("context");
var hook=document.getElementById("hook");
hook.onmouseover=function(){
con.className="jschange";
}
hook.onmouseout=function(){
con.className="";
}
}
window.onload=function(){
change();
}
</script>
</head>
<body>
<div id="wrapper">
<div id="context"><a id="hook" href="#">连接</a></div>
</div>
</body>
</html>
<!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>test</title>
<style type="text/css">
#context{width:200px;height:100px;background:#F60;color:#fff;}
a#hook{background:#669;width:80px;height:50px;line-height:50px;display:block;}
#wrapper .jschange{background:#CC0}
#wrapper .jschange a#hook{background:#999}
</style>
<script type="text/javascript">
function change(){
var con=document.getElementById("context");
var hook=document.getElementById("hook");
hook.onmouseover=function(){
con.className="jschange";
}
hook.onmouseout=function(){
con.className="";
}
}
window.onload=function(){
change();
}
</script>
</head>
<body>
<div id="wrapper">
<div id="context"><a id="hook" href="#">连接</a></div>
</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
a .a1{
color:#000;
background:#fff;
}
a:hover .a1{
color:#555;
background:#e5ffcc;/* 这个是背景，可以是颜色，也可以是图片。*/
}
<a class="a1">文字</p>
color:#000;
background:#fff;
}
a:hover .a1{
color:#555;
background:#e5ffcc;/* 这个是背景，可以是颜色，也可以是图片。*/
}
<a class="a1">文字</p>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
除非你设置的是链接 这样可以更换背景 但是变化文字，有点难 用js吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用js的onmouseover和onmouseout事件控制
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
