锦绣前程3future 2019-05-26 18:00 采纳率: 22.2%
浏览 1071
已采纳

求助大佬，怎么让鼠标经过li范围的时候就变色，而不是经过li中文字的时候变色!

我尝试过将li,,,display：block;但是还是不行，求助大佬怎么办呢
图片说明


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="3Future,三维书屋,前程锦绣">
<title>三维书屋|前程锦绣3future.com</title>
 <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?e4e2853a486fb45e2a89553ce641d3a2";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

<style>
*{border:0px;
margin:0px;}
body{
text-align:center;
background-image:url(./11.jpg);
}
#nav  ul {
height:40px;       
margin-left:12%;
margin-right:12%;
padding:0;
list-style:none;   
border-top:solid 5px #DAA520;    
border-bottom:solid 5px #DAA520; 
background:url(./22.jpg);  
margin-bottom:25px;
}
#nav ul li {
float:left;
text-align:center;
width:25%;
font:20px/2 "microsoft yahei";
}
#nav ul li a {
text-decoration:none;
color:#800080;
}
#nav ul li a:hover {
display:block; 
color:#FFFFFF; 
background:#cfc0aa;
 }
    div{
    display:block;
    font:50px/2  "microsoft yahei";
    color:#4793c9;
    clear:both;
    }
    span {
    font:25px/2  "microsoft yahei";
    color:#3a7baa;
    }

    div img{
    width:130px;

    vertical-align: middle;
    margin-bottom:10px;
    }

 /*  图片控制旋转开始 */
        .img{     
            width:80px;     
            height: 80px;     
            background:url(./long.png) no-repeat; 
            border-radius:140px;     
            -webkit-animation:run 3s linear 1s infinite;     
        }     

        .img:hover{     
            -webkit-animation-play-state:paused;     
        }     


        @-webkit-keyframes run{     
            from{     
                -webkit-transform:rotate(0deg);     
            }     
            to{     
                -webkit-transform:rotate(360deg);     
            }     
        }     


  </style>
 </head>
 <body>


<div style="margin-top:20px;margin-bottom:10px;">
 <img class="img"/>&nbsp&nbsp 3Future<span>.com</span>|前程锦绣&nbsp&nbsp
 <!---->
 <img class="img"/>
</div>


        <div id="nav">
                <ul>
                        <li><a href="#" />首页</a></li>
                        <li><a href="#" />时光记忆</a></li>
                        <li><a href="#" />前行印迹</a></li>
                        <li><a href="#" />关于我</a></li>
                </ul>   
        </div>
  <img style="border-top:10px solid #d2ecfa;border-bottom:10px solid #d2ecfa;
    width:75vw;" src="./1.jpg"/>

 </body>
</html>

让鼠标经过li部分的时候就变色，而不是让鼠标经过li文字上的时候变色，求助大佬

  • 写回答

3条回答 默认 最新

  • 单v纯微笑 2019-05-26 19:59
    关注

    可以尝试将:

    #nav ul li a:hover {
    display:block; 
    color:#FFFFFF; 
    background:#cfc0aa;
}

    改为：

    #nav ul li:hover {
    display:block; 
    color:#FFFFFF; 
    background:#cfc0aa;
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？