由图像组成的按钮的Javascript活动状态

Javascript active state for buttons composed of images

本文关键字：按钮 活动状态 Javascript 图像      更新时间：2023-09-26

Javascript newb在这里。我试图使一个菜单，改变它的图像时，按钮被点击和活动。

这里是html

  <div id="expand_footer">                      
           <div class="footer_btn" id="ftr_btn1"> 
            <img class="shopbtns" src="outerwear_icon.png" width="66" height="87" style="padding-top:4px;" /> 
           </div>
           <div class="footer_btn" id="ftr_btn2">
            <img class="shopbtns" src="top_icon.png" width="66" height="88" style="padding-top:4px;" />
           </div>
            <div class="footer_btn" id="ftr_btn3"> 
                <img class="shopbtns" src="bottom_icon.png" width="89" height="91" style="padding-top:1px;" />
            </div>
            <div class="footer_btn" id="ftr_btn4">
                <img class="shopbtns" src="boots_icon.png" width="66" height="80" style="padding-top:10px;" /> 
           </div>
 </div>

和css

.footer_btn {
    float:left;
    text-align:center;
    width:25%; /* percentage of stage to occupy */
    margin-top:0px; /*adjust spacing between text and image */
    padding:0!important;
    cursor:pointer;
    z-index: 405!important;
}

我正在从AS3切换到JS，所以如果这个问题看起来很愚蠢，请道歉。最好的方式来完成这只是在CSS或Javascript可以处理这个。我没有使用Jquery。(避免库负载)我正在使用GSAP，所以也许有一种方法或?事先感谢任何帮助。

可以使用background-image和selector吗?

.footer_btn {
//Your css
}
.footer_btn:hover {
  background-image: url('image.jpg');
}

相关文章：