html中鼠标悬停文字内容时图片边框同时变颜色

小鱼赶紧洗洗睡吧

已于 2024-01-19 15:06:57 修改

阅读量497

点赞数 7

文章标签： html 前端

于 2024-01-13 15:18:11 首次发布

本文链接：https://blog.csdn.net/rousongxiaobei_/article/details/135570420

版权

1.最后效果图鼠标悬停文字内容时图片边框同时变颜色，同样悬停到图片上文字也变颜色

2.废话不多说开始教学

3.先把文字和边框用a标签套起来

4.给边框和文字各设一个id或者class

5.在css中用>(子选择器)选择文字和图片的名字后在{写下样式}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .biankuang{
            width: 250px;
            margin: 0px auto;
            /*让文字居中*/
            text-align: center;
        }
        a{
            color: black;
            text-decoration: none;/*去下划线*/
        }
        .biankuang .yangshi{
            width: 100%;
        }
        .biankuang .yangshi .diyi-tupian{
            /*设置行高*/
            line-height: 250px;
            /*设置边框*/
            border: 2px solid #BEC0C1;
        }
        .biankuang .yangshi .diyi-tupian img{
            /*边框中图片居中*/
            vertical-align: middle;
        }
        /* 让边框和文字同时被选中变颜色 */
        .biankuang a:hover>.diyi-tupian,a:hover>.diyi-wenzi{
            /*文字变颜色*/
            color: #68B92F; 
            /*边框变颜色*/
            border-color: #68B92F;
        }
    </style>
</head>
<body>
    <div class="biankuang">
        <a class="yangshi" href="#">
            <p class="diyi-tupian" href="#">
                <img src="/img/8.png">
            </p>
            <p class="diyi-wenzi">冷却塔</p>
        </a>
    </div>
    
</body>
</html>

小鱼赶紧洗洗睡吧

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
html中鼠标悬停文字内容时图片边框同时变颜色

1.最后效果图鼠标悬停文字内容时图片边框同时变颜色，同样悬停到图片上文字也变颜色。5.在css中用>(子选择器)选择文字和图片的名字后在{写下样式}4.给边框和文字各设一个id或者class。3.先把文字和边框用a标签套起来。2.废话不多说开始教学。
复制链接

扫一扫