|
|
效果简述：一个用单线围绕的文本框，在鼠标放在上面的时候，边框和背景的颜色都有变化，提醒浏览者目前正在观看此部分内容。
这种效果在BLOG中常用，我一开始以为是通过JS实现的，但当自己想用上它的时候，却发现
我没法像定义外观（颜色、大小、边框等）那样去定义CSS中某个CLASS的事件
因为在<style type="text/css">中只能书写CSS描述，JS是不可以写的。
今日仔细看了一个别人的例子，终于发现，原来是如此的简单！
我们都知道，链接在CSS的定义中除了一个普通的<A>标记以外
还可以对以下四种状态进行定义：
a:link 没有接触过的链接
a:visited访问过的链接
a:hover 鼠标放在链接上的状态
a:active 在链接上按下鼠标时的状态
类似的，对其它CSS中的CLASS/TAG，也可以借鉴
开头说的那个效果就是使用了:hover状态，因此解决方案如下：
div.box_singleline {border:solid black 1px; padding:1px 4px 1px 4px;}
div.box_singleline:hover {border: 1px solid #00f; background: #f8f8f8}
<div class="box_singleline">something...</div>
原来如此简单，呵呵，收工。
|
|
