鼠标经过超链接上,元素(li)背景变色的代码,同时文字颜色改变

效果如下图:


要实现这个效果。很简单。 定义CSS样式:

a:hover{
    background:#f29901;
}

这段代码的显示效果如下图


显然,这样太丑了。

只需要再加上一句
a:hover{
    background:#f29901;
    display:block;
}

即可如效果图所示,当鼠标移动到超链接上的时候,整个li元素背景变色。

可是这样还有一个问题,鼠标必须移动到文字上面才能触发a:hover效果。
如果想要鼠标移动到元素li上的时候,就触发a:hover效果。可以这样写:

复制代码

a {
    width:130px;  
    /*li元素的宽度,也就是相当于定义了一个宽度范围,当鼠标移动到上面的范围的时候就触发a:hover效果*/
}

a:hover{
    background:#f29901;
    display:block;
}

复制代码

下面附上完整例子代码:

html代码:
 

复制代码

<ul id="content">
     <li><a href="javascript:;">导航菜单1</a></li>
        <li><a href="javascript:;">导航菜单2</a></li>
        <li><a href="javascript:;">导航菜单3</a></li>
        <li><a href="javascript:;">导航菜单4</a></li>
        <li><a href="javascript:;">导航菜单5</a></li>
        <li><a href="javascript:;">导航菜单6</a></li>
</ul>

复制代码

css代码:

复制代码

#content{}
#content li{
 line-height:30px;
 text-align:center;
 color:#fff;
 display:block;
 background:#333;
 width:100px;
}
#content li a{
 display:block;
 float:right;
 background:#333;
 width:100px;
 color:#fff;
 text-decoration:none;
}
#content li a:hover{
 color:#000;
 background:#fff;
}

 

a {text-decoration:none; color:#000000; font-size:14px;}   初始状态

a:hover {text-decoration:none;color:#ff0000; font-size:14px}   激发状态

分析:
text-decoration:none  没有下划线.
color   字体颜色.
font-size  字体大小(可用px.pt 等单位表示)
background-color 字体的背影颜色。
 

结果:

a:hover {
  background:#FFFFFF;
  text-decoration:none;
  color:#0066FF;
  display:block;
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值