HTML--比较实用的小例子

常用的前端实例：

1略

2、在网页商城中的图片当我们把鼠标放上去之后，图片会显示一个有颜色的外边框，图片某一部分的字体的颜色并发生改变

鼠标放上去之前

HTML--比较实用的小例子

鼠标放上去之后：

HTML--比较实用的小例子

实现的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>Title</title>
    <style>
        .ele{
            /*先给图片的变框设置一个有宽度的变框这个鼠标放上去看到的效果就是静态的*/
            border: 1px solid transparent;
            /*加变框是为了不希望看到图片的位置发生改变*/
        }

        .ele:hover{
            /*伪类 ：鼠标放上去会出现一个外边框*/
            border: 1px solid gray;
        }
        /*鼠标放上去 一部分的字体颜色发生改变*/
        .ele:hover .ele-item{
            color: red;
        }
    </style>
</head>
<body>
    <div class="ele">
        <div>123</div>
        <div class="ele-item">123</div>
    </div>
</body>
</html>

边框加颜色-并改变某一部分的字体颜色