求助大佬,怎么让鼠标经过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个回答

可以尝试将:

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

改为:

#nav ul li:hover {
    display:block; 
    color:#FFFFFF; 
    background:#cfc0aa;
}
info_china
info_china 感谢大佬,膜拜大佬
9 个月之前 回复

你将 a标签 改为block ; 让a标签撑满整个容器就行了. 因为你的hover 样式是给 a标签的.

info_china
info_china 谢谢大佬
9 个月之前 回复

最简单的做法,在你现有的代码基础上加上一段css:
#nav ul li:hover{
background:#cfc0aa;
}

info_china
info_china 感谢大佬
9 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问