JS ul li当前选中状态样式冲突问题。
写了个ulli的当前选中变样式状态效果。但是选中后hover鼠标移动效果就没有用了。如图：初始样式鼠标移动过样式变红鼠标点击当前选中变绿但是选中后ulli:hover的样...
写了个ul li的当前选中变样式状态效果。但是选中后hover鼠标移动效果就没有用了。
如图：
初始样式
鼠标移动过样式变红
鼠标点击当前选中变绿
但是选中后ul li:hover 的样式就没用了！ 我想要选中的li 没有hover样式， 没选中的有hover样式。这怎么改?求代码。
以下是我的代码：
<head>
<title>hover没用了</title>
</head>
<style type="text/css">
ul li {
background: #f8f8f8;
color: #999999;
border: 1px solid #cccccc;
}
ul li:hover {
background: #F00;
}
</style>
<body>
<div id="t_button">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</body>
<script type="text/javascript">
document.getElementById("t_button").onclick = function(e){
e = e || window.event;
var target = e.srcElement || e.target,
tagName = target.tagName.toLowerCase(),
allLi = document.getElementById("t_button").getElementsByTagName("li");
for(var i=0,len=allLi.length;i<len;i++){
if(target == allLi[i]){
allLi[i].style.background = "#66bb6a";
allLi[i].style.color="#FFF";
allLi[i].style.border="1px solid #66bb6a";
}else{
allLi[i].style.background = "#f8f8f8";
allLi[i].style.color="#999999";
allLi[i].style.border=" 1px solid #cccccc";
}
}
};
</script>
</html> 展开
如图：
初始样式
鼠标移动过样式变红
鼠标点击当前选中变绿
但是选中后ul li:hover 的样式就没用了！ 我想要选中的li 没有hover样式， 没选中的有hover样式。这怎么改?求代码。
以下是我的代码：
<head>
<title>hover没用了</title>
</head>
<style type="text/css">
ul li {
background: #f8f8f8;
color: #999999;
border: 1px solid #cccccc;
}
ul li:hover {
background: #F00;
}
</style>
<body>
<div id="t_button">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</body>
<script type="text/javascript">
document.getElementById("t_button").onclick = function(e){
e = e || window.event;
var target = e.srcElement || e.target,
tagName = target.tagName.toLowerCase(),
allLi = document.getElementById("t_button").getElementsByTagName("li");
for(var i=0,len=allLi.length;i<len;i++){
if(target == allLi[i]){
allLi[i].style.background = "#66bb6a";
allLi[i].style.color="#FFF";
allLi[i].style.border="1px solid #66bb6a";
}else{
allLi[i].style.background = "#f8f8f8";
allLi[i].style.color="#999999";
allLi[i].style.border=" 1px solid #cccccc";
}
}
};
</script>
</html> 展开
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<title>hover没用了</title>
<style type="text/css">
ul li {
background: #f8f8f8;
color: #999999;
border: 1px solid #cccccc;
}
ul li.item:hover {
background: #F00;
}
ul li.on{
background: green;
}
</style>
</head>
<body>
<div id="t_button">
<ul>
<li class="item">a</li>
<li class="item">b</li>
<li class="item">c</li>
</ul>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#t_button li").on("click",function(){
var $this = $(this);
$this.addClass("on").removeClass("item");
if($this.siblings(".on").length>0){
$this.siblings(".on").addClass("item").removeClass("on");
};
})
})
</script>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
参考：
a:link,a:visited {color:#000000;text-decoration:none;}a:hover,a:active {color:#000ff0;text-decoration:underline;}
希望能帮助到你。
a:link,a:visited {color:#000000;text-decoration:none;}a:hover,a:active {color:#000ff0;text-decoration:underline;}
希望能帮助到你。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
