实现小三角形，鼠标悬停小三角形出现

1.图片实现
html:

<div>
     <p>服务行业</p>
     <img src="icon.jpg" />
</div>

css:

* {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 50px;
            border: 2px solid blue;
            margin: 50px;
            text-align: center;
        }

        p {
            width: 200px;
            height: 40px;
            background: gray;
            text-align: center;
            line-height: 40px;
        }

        img {
            /* border: 1px solid red; */
            vertical-align: top;
            /* img是行内块元素，行内块元素默认是相对于文本的基线对齐 */
            /* width: 13px;
            margin: 0 auto;
            display: block; */
            /* 是让一个有宽度的块元素水平居中 div  p ol  ul */
            /* 元素类型转换书写 display:block; */
            /* 显示隐藏  隐藏可以用display:none;  显示常用值  display:block; */
            /* 显示隐藏  隐藏可以用display:none;  显示常用值  display:inline-block; */
            display: none;
        }

        /* 给div去添加，也就是说鼠标悬停在div上的时候，让后代img显示 */
        div:hover img {
            display: inline-block;
        }

        /* 给p去添加hover  也就是鼠标悬停在p上的时候，让p的兄弟img显示 */
        p:hover+img {
            display: inline-block;
        }

2.背景图法
html:

<div>
        <p>服务行业</p>
</div>

CSS:

        body,p{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 47px;
            border: 2px solid blue;
            margin: 50px;
            text-align: center;
        }
        div:hover{
            background: url(icon.jpg) no-repeat center bottom;
        }
        p{
            width: 200px;
            height: 40px;
            background: gray;
            text-align: center;
            line-height: 40px;
        }

3.方框法
html:

<div>
        <p>服务行业</p>
        <h1></h1>
</div>

CSS:

        body,p,h1{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 50px;
            border: 2px solid blue;
            margin: 50px;
            text-align: center;
        }
        p{
            width: 200px;
            height: 40px;
            background: gray;
            text-align: center;
            line-height: 40px;
        }
        /* h1  是块元素 */
       h1{
           width: 0;
           height: 0;
           border: 5px solid transparent;
           border-top: 5px solid red;
           margin: 0 auto;
           display: none;
       }
       div:hover h1{
           display: block;
       }

4.伪元素选择器
html:

    <div>
        <p>服务行业</p>
    </div>

CSS:

        body,p,h1{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 50px;
            border: 2px solid blue;
            margin: 50px;
            text-align: center;
        }
        p{
            width: 200px;
            height: 40px;
            background: gray;
            text-align: center;
            line-height: 40px;
        }
       /* div:hover::after{
           content: url(icon.jpg);
           display: block;
           margin-top:-10px;
       } */

       div:hover::after{
           content:"";
           border: 5px solid transparent;
           border-top: 5px solid red;
           height: 0;
           display: block;
           width: 0;
           margin: 0 auto;
       }