一个效果的实现马士兵教育官网

全部代码：
<!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>网易的新闻</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
             body{
                 background-color: antiquewhite;
             }
             .news-wrapper{
                     width: 300px;   
                     height: 358px;
                     margin:50px auto ;
                     background-color:bisque;  
                     border-top:1px   blue  solid; 
             }   
             .news-title{   
                 height:40px; 
                 display:inline-block; 
                 border-top:1px solid   red ;
                 margin-top:-1px;   
             }
             /* 有时候没有显示出来是因为 两个选择器设置重复了 */
             .news-title a{
                  text-decoration: none;
                  color:#40406B;
                  font-weight:bold;  
                  line-height:40px;
             }
             .news-img .img-title{
                        margin-top:-30px;
                        color:white;
                        font-weight:bold;
                        padding-left:30px;
             }
             a{  
                 text-decoration:none;
             }   
             .news-list{
                 margin-top:20px;
                 padding-left:18px;
          
             }
             .news-list:hover{
                  background-color:#40406B;
             }
             .news-list  li{  
                  margin-bottom:20px;
             }
             .news-list li a{  
                 font-size:12px;
             }
             .news-list li a:hover{
                  color:red;
             }   
    </style>   
</head> 
<body>
        <div class="news-wrapper">
            <h2  class="news-title"> 
                   <a  href="#">体育</a>
            </h2>                       
            <div class="news-img">      
                <a href="#">        
                    <img src="../img/03.webp" alt="费德勒">   
                     <h3  class="img-title"> 
                         费德勒首负
                     </h3>
                </a>
            </div>
            <ul  class="news-list">
                <li>
                    ●<a href="#">1</a>
                </li>
                <li>
                    ●<a href="#">2</a>
                </li>
                <li>
                    ●<a href="#">3</a>
                </li>
                <li>
                    ●<a href="#">4</a>
                </li>
            </ul>
        </div>
        <!-- 三个结构 -->
</body>
</html>
图片_6.png
图片_9.png 图片_7.png
我想让鼠标移到Li中的每一条会出现第三个图的效果，但是我第二张图那样写没有出现