编写课程表网页悬停显示内容

编写一个课程表网页，当鼠标悬停或点击课程名称时，弹出课程

这样？

<style>
    .coursename {
        position: relative;display:inline-block;margin-right:20px
    }
    .coursename a{cursor:pointer;line-height:30px}
    .coursename .coursedetail {
        position: absolute;
        left: 0;
        top: 25px;
        border: solid 1px #ccc;
        padding: 5px;
        display: none;
        background: #fff;
        z-index: 9;
        width: 300px;
    }

    .coursename:hover .coursedetail {
        display: block;
    }
</style>
<div class="coursename">
    <a>高数</a>
    <div class="coursedetail">
        高数课程的详细介绍<br />
        高数课程的详细介绍<br />
        高数课程的详细介绍
    </div>
</div>
<div class="coursename">
    <a>英语</a>
    <div class="coursedetail">
        英语课程的详细介绍<br />
        英语课程的详细介绍<br />
        英语课程的详细介绍
    </div>
</div>
<div class="coursename">
    <a>物理</a>
    <div class="coursedetail">
        物理课程的详细介绍<br />
        物理课程的详细介绍<br />
        物理课程的详细介绍<br />
        物理课程的详细介绍
    </div>
</div>

有帮助麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~

https://blog.csdn.net/weixin_43873198/article/details/103445152