css 鼠标样式
请教个关于css里面a:hover,a:visted的使用，现在是个无序列表admin.php//有个浮动框架<iframesrc="code/main_HuiYuanZ...
请教个关于 css 里面 a:hover,a:visted的使用，现在是个 无序列表
admin.php // 有个浮动框架
<iframe src="code/main_HuiYuanZhongXin.html" name="admin_left" frameborder="0" height="100%" width="16%" style="border-right:2px solid #b5cfd9;"></iframe>
main_HuiYuanZhongXin.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/Global.css" rel="stylesheet" type="text/css">
<style type="text/css">
ul{border:0;margin:0;padding:0;}
li{list-style-type:circle; font-size:16px; height:40px; line-height:40px;}
li:hover{ background-color:#e6f2fb; color:#2571b0;}
li a:visted{ font-weight:bolder;color:#2571b0;background-color:#e6f2fb;}
</style>
<ul>
<li><a href="">积分卡管理</a></li>
<li><a href="">会员管理</a></li>
<li><a href="">会员注册</a></li>
<li><a href="">信息发布</a></li>
</ul>
请教如下问题：
1.怎么可以让 这个 无序列表在 浮动框架里面 剧中，但是每个LI 要左对齐
2.鼠标放上去的时候，那个LI整行要显示背景颜色，不是单纯的LI里面内容或者a链接显示背景颜色。
3.鼠标点击某个LI后，对应的LI出现字体加粗，颜色变化，背景颜色变化；点击其它的LI后，之前的LI恢复原样式，被点击的LI会再变样式。
这第三个功能，用a:visted貌似不起作用，要用JQ做
具体演示如图：
麻烦各位前辈指教一下小弟。 展开
admin.php // 有个浮动框架
<iframe src="code/main_HuiYuanZhongXin.html" name="admin_left" frameborder="0" height="100%" width="16%" style="border-right:2px solid #b5cfd9;"></iframe>
main_HuiYuanZhongXin.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/Global.css" rel="stylesheet" type="text/css">
<style type="text/css">
ul{border:0;margin:0;padding:0;}
li{list-style-type:circle; font-size:16px; height:40px; line-height:40px;}
li:hover{ background-color:#e6f2fb; color:#2571b0;}
li a:visted{ font-weight:bolder;color:#2571b0;background-color:#e6f2fb;}
</style>
<ul>
<li><a href="">积分卡管理</a></li>
<li><a href="">会员管理</a></li>
<li><a href="">会员注册</a></li>
<li><a href="">信息发布</a></li>
</ul>
请教如下问题：
1.怎么可以让 这个 无序列表在 浮动框架里面 剧中，但是每个LI 要左对齐
2.鼠标放上去的时候，那个LI整行要显示背景颜色，不是单纯的LI里面内容或者a链接显示背景颜色。
3.鼠标点击某个LI后，对应的LI出现字体加粗，颜色变化，背景颜色变化；点击其它的LI后，之前的LI恢复原样式，被点击的LI会再变样式。
这第三个功能，用a:visted貌似不起作用，要用JQ做
具体演示如图：
麻烦各位前辈指教一下小弟。 展开
3个回答
展开全部
<div class="float">
<ul>
<li><a href="">积分卡管理</a></li>
<li><a href="">会员管理</a></li>
<li><a href="">会员注册</a></li>
<li><a href="">信息发布</a></li>
</ul>
</div>
其实很简单，首先给浮动框和ul加上宽度
<style>
li,ul{ list-style:none;}
.float{ width:500px;}
ul{ width:300px; margin:0 auto;}
li{默认样式 我不写了}
li.on{ font-weight:bold; color:#鬼知道的颜色; background-color:#鬼知道的颜色;}
</style>
以下是jq了，jq库自己去调用。
<script>
$("li").hover(
function () {
$(this).css("background-color","blue");
},
function () {
$(this).css("background-color","#fff");
}
);
$("li").bind('click', function() {
$("li").removeClass("on");
$(this).addClass("on");
});
</script>
望采纳！敲了半天
<ul>
<li><a href="">积分卡管理</a></li>
<li><a href="">会员管理</a></li>
<li><a href="">会员注册</a></li>
<li><a href="">信息发布</a></li>
</ul>
</div>
其实很简单，首先给浮动框和ul加上宽度
<style>
li,ul{ list-style:none;}
.float{ width:500px;}
ul{ width:300px; margin:0 auto;}
li{默认样式 我不写了}
li.on{ font-weight:bold; color:#鬼知道的颜色; background-color:#鬼知道的颜色;}
</style>
以下是jq了，jq库自己去调用。
<script>
$("li").hover(
function () {
$(this).css("background-color","blue");
},
function () {
$(this).css("background-color","#fff");
}
);
$("li").bind('click', function() {
$("li").removeClass("on");
$(this).addClass("on");
});
</script>
望采纳！敲了半天
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
main_HuiYuanZhongXin.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<style type="text/css">
*{border:0;margin:0}
body {text-align:center}
#menu{margin:0 auto;width:125px;text-align:left;font-size:16px;}
#menu>p {padding:5px;cursor:pointer}
.item_normal {font-weight:normal; background-color:white; color:black;}
.item_hover {font-weight:bold;color:#2571b0;background-color:#e6f2fb;}
</style>
<body>
<div id="menu">
<p class="item_normal">● 积分卡管理</p>
<p class="item_normal">● 会员管理</p>
<p class="item_normal">● 会员注册</p>
<p class="item_normal">● 信息发布</p>
</div>
</body>
<script type="text/javascript">
var lis=document.getElementById("menu").getElementsByTagName("p");
for(i=0;i<lis.length;i++){
lis[i].onmouseover=function(event){
this.className="item_hover";
}
lis[i].onmouseout=function(event){
this.className="item_normal";
}
}
</script>
</html>
话说你为什么要把这个放在一个iframe里面？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<style type="text/css">
*{border:0;margin:0}
body {text-align:center}
#menu{margin:0 auto;width:125px;text-align:left;font-size:16px;}
#menu>p {padding:5px;cursor:pointer}
.item_normal {font-weight:normal; background-color:white; color:black;}
.item_hover {font-weight:bold;color:#2571b0;background-color:#e6f2fb;}
</style>
<body>
<div id="menu">
<p class="item_normal">● 积分卡管理</p>
<p class="item_normal">● 会员管理</p>
<p class="item_normal">● 会员注册</p>
<p class="item_normal">● 信息发布</p>
</div>
</body>
<script type="text/javascript">
var lis=document.getElementById("menu").getElementsByTagName("p");
for(i=0;i<lis.length;i++){
lis[i].onmouseover=function(event){
this.className="item_hover";
}
lis[i].onmouseout=function(event){
this.className="item_normal";
}
}
</script>
</html>
话说你为什么要把这个放在一个iframe里面？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你做个默认样式，然后做个滑过效果就行，不用JQ做也是可以的。CSS就能解决的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
