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

Question

Javascript 新来的。我正在尝试制作一个菜单，该菜单会在单击并激活按钮时更改其图像。

这是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 所以也许有办法吗？在此先感谢您的帮助。

Answer 1

你可以使用 background-image and selector 吗？

.footer_btn {
//Your css
}

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

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

Javascript active state for buttons composed of images

javascript

html

css

gsap