js或css如何实现鼠标选中文字改变文字的背景色,兼容ie(6,7,8), 火狐 ,谷歌等各大浏览器 20
5个回答
展开全部
您好!很高兴为您答疑!
<style>.aa{text-align:center;}a,a:hover{text-decoration:none; color:#fff;}.aa a{display:block; width:150px; height:50px; line-height:50px; background:#990;}.aa a:hover{background:#000;}</style><div class="aa"><a href="#">鼠标移上去变色</a></div>
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。
<style>.aa{text-align:center;}a,a:hover{text-decoration:none; color:#fff;}.aa a{display:block; width:150px; height:50px; line-height:50px; background:#990;}.aa a:hover{background:#000;}</style><div class="aa"><a href="#">鼠标移上去变色</a></div>
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。
展开全部
直接用a的伪类好了啊 不需要用js的
先给a确定一个大小,不然看起来不好看,再把a的display改为block
然后写伪类
<style>
.aa{text-align:center;}
a,a:hover{text-decoration:none; color:#fff;}
.aa a{display:block; width:150px; height:50px; line-height:50px; background:#990;}
.aa a:hover{background:#000;}
</style>
<div class="aa">
<a href="#">鼠标移上去变色</a>
</div>
先给a确定一个大小,不然看起来不好看,再把a的display改为block
然后写伪类
<style>
.aa{text-align:center;}
a,a:hover{text-decoration:none; color:#fff;}
.aa a{display:block; width:150px; height:50px; line-height:50px; background:#990;}
.aa a:hover{background:#000;}
</style>
<div class="aa">
<a href="#">鼠标移上去变色</a>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<style>
.left_srt li {
float: left;
height: 24px;
overflow: hidden;
padding-right: 1px;
width: 57px;
}
.left_srt li a {
background: none repeat scroll 0 0 #DDDDDD;
color: #444444;
cursor: pointer;
display: block;
float: left;
height: 24px;
line-height: 25px;
text-align: center;
width: 57px;
}
</style>
<div class="left_srt">
<li id="exp1" class="bot" onmouseover="bot(1)"><a>最新热点</a></li>
<li id="exp2" onmouseover="bot(2)" class=""><a>美容</a></li>
<li id="exp3" onmouseover="bot(3)" class=""><a>娱乐</a></li>
<li id="exp4" onmouseover="bot(4)" class=""><a>服饰</a></li>
<li id="exp5" onmouseover="bot(5)" class=""><a>健康</a></li>
</div>
<script>
function bot5(n){
for(var i=1;i<=4;i++){
if (i==n){
document.getElementById('exp'+i).className='bot';
}
else {
document.getElementById('exp'+i).className='';
}
}
</script>
}
这个可以实现
.left_srt li {
float: left;
height: 24px;
overflow: hidden;
padding-right: 1px;
width: 57px;
}
.left_srt li a {
background: none repeat scroll 0 0 #DDDDDD;
color: #444444;
cursor: pointer;
display: block;
float: left;
height: 24px;
line-height: 25px;
text-align: center;
width: 57px;
}
</style>
<div class="left_srt">
<li id="exp1" class="bot" onmouseover="bot(1)"><a>最新热点</a></li>
<li id="exp2" onmouseover="bot(2)" class=""><a>美容</a></li>
<li id="exp3" onmouseover="bot(3)" class=""><a>娱乐</a></li>
<li id="exp4" onmouseover="bot(4)" class=""><a>服饰</a></li>
<li id="exp5" onmouseover="bot(5)" class=""><a>健康</a></li>
</div>
<script>
function bot5(n){
for(var i=1;i<=4;i++){
if (i==n){
document.getElementById('exp'+i).className='bot';
}
else {
document.getElementById('exp'+i).className='';
}
}
</script>
}
这个可以实现
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
同意这个写法,另外webkit内核浏览器现已支持,不需要单独定义:
::selection{color:#fff;background-color:#000;}
::-moz-selection{color:#fff;background-color:#000;}
至于在IE中的实现,暂时没有简单的好办法
::selection{color:#fff;background-color:#000;}
::-moz-selection{color:#fff;background-color:#000;}
至于在IE中的实现,暂时没有简单的好办法
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
css大概就这三句
p::selection {
background:#cc0000;
color:#fff;
}
p::-moz-selection {
background:#cc0000;
color:#fff;
}
p::-webkit-selection {
background:#cc0000;
color:#fff;
}
p::selection {
background:#cc0000;
color:#fff;
}
p::-moz-selection {
background:#cc0000;
color:#fff;
}
p::-webkit-selection {
background:#cc0000;
color:#fff;
}
更多追问追答
追问
这方法我试过了 在ie下是没有效果的 只在谷歌 火狐下有用
追答
IE确实不行 好像没发现什么好办法 等IE支持吧
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询