求助:CSS超链接,选中中再点击其它地方,设置的选中样式就消失了。_html/css_WEB-ITnose
2016-06-24 12:16:52原创579
CSS设置:
#page a:hover {text-decoration:nonecolor:red}
#page a:active {text-decoration:underlinecolor:red}
选中后,再点击其它空白地方,设置的 a:active样式就消失了。 应该是该样式一直保留到点击同一级别的其它链接才对啊...
回复讨论(解决方案)
伪类,兼容性不是很好。你可以用 js 来做一个 点击后 增加一个 class 上去 。
a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF}/* 当有鼠标悬停在链接上 */a:active {color: #0000FF} /* 被选择的链接 */
这个只有被激活状态的时候,才算符合条件吧
CSS code?1234a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */a:active {color: #0000FF} /* 被选择的链接 */
这个只有被激……
这个在点击链接的时候不就算激活吗啊?
这个应该是点击的那一下,鼠标没有松开之前。。正在操作的过程中。。。。
这个应该是点击的那一下,鼠标没有松开之前。。正在操作的过程中。。。。
好吧,那请问下,怎么改呢?
改成a:visited不能达到你要的效果吗?
或者,如果你要的效果比较多的话,可以组合使用啊
比如a:visited:hover,这样表示已经访问过的链接,再有鼠标悬浮时的情况。
按照自己的情况自己组合试试。
不过,如果操作次数多了话,最好清一下缓存,因为浏览器会记住你之前访问的网站,刷新之后,还是会显示已经访问过的情况。
改成a:visited不能达到你要的效果吗?
或者,如果你要的效果比较多的话,可以组合使用啊
比如a:visited:hover,这样表示已经访问过的链接,再有鼠标悬浮时的情况。
按照自己的情况自己组合试试
第一步,点击文本框,在属性栏中填写你需要的文字;见下图
第二步,为文本框文字添加css属性,点击文本框,可以在css面板中直接选择颜色或填写值;(可以在网页中直接定义css,也可以新建一个css文件)
显示效果
如果要实现鼠标点击灰色文字自动消失,需要使用js编程,可以在网上找js或jquery效果代码添加进页面内。
附上具体代码:
<!DOCTYPE html><html><head><style>.txt{ color:#ccc}.focus{ color:#333}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){ var str="我是灰色文字" $(".txt").val(str) $(".txt").focus(function(){ var v=this.value if(v == str){ $(this).val("").addClass("focus") } }).blur(function(){ var v=this.value if(v == ""){ $(this).val(str).removeClass("focus") } })})</script></head><body><input class="txt" type="text" value="我是灰色文字"/></body></html>使用 return false,将会禁止向上冒泡和禁止默认行为。也就是禁止了元素的默认响应和上层元素的继续响应。建议先检查上层元素是否有click响应,再尝试先remove后addclass试试。