jquery - 在带有图标的图像上创建悬停状态

Question

我是 HTML5/Bootstrap 的新手，我正在尝试向我的响应式图像添加基本的悬停状态，并使它们充当按钮。这是我目前开发的。

          <div align="center" class="col-sm-2">
            <a href="#">
                <picture>
                    <!--[if IE 9]><video style="display: none;"><![endif]-->
                    <source srcset="../../../img/img1.png" class="img-responsive" media="(min-width: 800px)">
                    <!--[if IE 9]></video><![endif]-->
                    <img srcset="../../../img/img1-sm.png, ../../../img/img1-sm.png" class="img-responsive" alt="Image One">
                </picture>
            </a>
          </div>

Answer 1

您始终可以使用 css，具体取决于您希望悬停产生的效果。下面的代码放在您的 css 样式表文件中，或者放在用“style”标签包裹的文档中

picture img:hover{
/*Things to happen on hover*/
}

或者您可以使用 jQuery。下面的代码进入“脚本”标签，可以在页面加载时运行。

$(window).load(function(){
    $('picture').find('img').hover(function(){
        //Things to happen on hover
    });
}); 

把它做成一个按钮，把它包在一个链接里或者用jQuery创建一个点击事件