html鼠标移动变色和边框圆滑笔记

最新推荐文章于 2024-01-13 15:18:11 发布

结城明日奈是我老婆

最新推荐文章于 2024-01-13 15:18:11 发布

阅读量814

点赞数

分类专栏： html学习专栏

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/116736276

版权

html学习专栏专栏收录该内容

36 篇文章 0 订阅

订阅专栏

为了尝试学习鼠标移动到按键框变色就开始了网上找大佬发贴的学习
首先是找到了用onmouseover的代码

<a href="链接" onmouseover="document.bicolor='color:red' ">变色链接</a>

但是只是变色还是全浏览器背景变色，为了变回原来的样子我自己又加了onmouseout标签，但是根本没解决问题。又去找了一贴

<html>
<head>
<style>
a:link { COLOR: #000000; TEXT-DECORATION: none; font-weight: bold; font-size :18px }
a:visited { COLOR: #000000; TEXT-DECORATION: none; font-weight: bold; font-size :18px }
a:active { COLOR: red; TEXT-DECORATION: underline; font-weight: bold; font-size :18px }
a:hover { COLOR: red; TEXT-DECORATION: none; font-weight: bold; font-size :18px }
</style>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
</body>
</html>

虽然是打到了字体的变色但是没达到我想要的效果。但这也是意外收获，然后没搞懂a:link这些的意思，去查了一下

a:link {color: #FF0000} /* 未访问时的状态 */
a:visited {color: #00FF00} /* 已访问过的状态 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */
a:active {color: #0000FF} /* 鼠标按下去时的状态 */

*之后终于查到了在css里面添加个标签就行了

.yes1:hover{
    background-color:rgb(0,250,75);
}/*.yes1是自己定义的class标签，自己可以按照自己的来修改*/

附加
css让背景边框变得圆滑：

border-radius:5px;
-most-border-radius:5px;
-Webkit-border-radius:5px;
-O-border-radius:5px;
/*5px改变弧度大小可自行更改*/
font-size:30px;
/*don't-size改变字体大小*/

结城明日奈是我老婆

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
html鼠标移动变色和边框圆滑笔记

为了尝试学习鼠标移动到按键框变色就开始了网上找大佬发贴的学习首先是找到了用onmouseover的代码<a href="链接" onmouseover="document.bicolor='color:red' ">变色链接</a>但是只是变色还是全浏览器背景变色，为了变回原来的样子我自己又加了onmouseout标签，但是根本没解决问题。又去找了一贴<html><head><style>a:link { COLOR: #00000
复制链接

扫一扫