hover变化图片

<div class="icon width mar">
           <div class="cpzs_tit"></div>
           <div class="iconin">
               <ul>
                   <li><div class="iconinimg"><div class="hlx"></div><div class="hi1"></div></div><div class="iconin_fl"><%=nav.getallsubcataloies("0301",true) %></div><a class="iconin_more" href="<%=site.siteurl %>products/1972.html">></a></li>
                   <li><div class="iconinimg"><div class="hlx"></div><div class="hi2"></div></div><div class="iconin_fl"><%=nav.getallsubcataloies("0302",true) %></div><a class="iconin_more" href="<%=site.siteurl %>products/1978.html">></a></li>
                   <li><div class="iconinimg"><div class="hlx"></div><div class="hi3"></div></div><div class="iconin_fl"><%=nav.getallsubcataloies("0303",true) %></div><a class="iconin_more" href="<%=site.siteurl %>products/1984.html">></a></li>
                   <li><div class="iconinimg"><div class="hlx"></div><div class="hi4"></div></div><div class="iconin_fl"><%=nav.getallsubcataloies("0304",true) %></div><a class="iconin_more" href="<%=site.siteurl %>products/1986.html">></a></li>
                   <li><div class="iconinimg"><div class="hlx"></div><div class="hi5"></div></div><div class="iconin_fl"><%=nav.getallsubcataloies("0305",true) %></div><a class="iconin_more" href="<%=site.siteurl %>products/1988.html">></a></li>
               </ul>
        <div class="clear"></div>
          </div>
 </div>

js：

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $(".hcontact_cont ul li:eq(0)").css({ "background": "url(<%=site.path.themepath %>images/hc1.jpg) no-repeat top center" });
        $(".hcontact_cont ul li:eq(1)").css({ "background": "url(<%=site.path.themepath %>images/hc2.jpg) no-repeat top center" });
        $(".hcontact_cont ul li:eq(2)").css({ "background": "url(<%=site.path.themepath %>images/hc3.jpg) no-repeat top center" });
        for (var i = 1; i < 6; i++) {
            $(".iconin>ul>li:eq(" + (i - 1) + ")>.iconinimg>div:eq(1)").css({ "background": "url(<%=site.path.themepath %>images/hicon" + i + ".png) no-repeat center 50px" });

        }
 
        var iconhover = new Array(1, 2, 3, 4,5);
        for (var j = 0; j < 6; j++) {
            $(".iconin>ul>li:eq(" + j + ")>.iconinimg>div:eq(1)").hover(function () {
                var slls = $(this).attr("class");
                slls = slls.replace("hi", "");
                $(this).css({ "background": "url(<%=site.path.themepath %>images/hicon" + slls + "h.png) no-repeat center 50px" });

            }, function () {
                var slls = $(this).attr("class");
                slls = slls.replace("hi", "");
                $(this).css({ "background": "url(<%=site.path.themepath %>images/hicon" + slls + ".png) no-repeat center 50px" });
            });
        
        
        }

    });

 
</script>

图片命名：

 

效果：

 

转载于:https://www.cnblogs.com/LLMjiayou7/p/6943576.html