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样式表文件中，或者包含在“样式”标记

中的文档中

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

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

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

要将其设置为按钮，请将其包装在链接中或使用jQuery创建单击事件

Answer 2

使用CSS悬停并使用jQuery将其用作按钮。

＆＃13;

$(document).ready(function(){
	$("#myImage").click(function(){
		alert("Your picture acts like a button!");
	});
});

＆＃13;

#myImage:hover
{
	-webkit-filter:grayscale(100%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://goo.gl/DiODcW"></script>
<img src="http://goo.gl/DiODcW" class="img-responsive" id="myImage">

＆＃13;

在上面的代码段中，CSS中的hover会将图像转换为灰度图像（您可以添加自己的代码），图像上的click会打开alert框（您可以添加自己的代码。）

或者如果您想将图片用作链接，请执行以下操作：

<a href="#your link"><img src="http://goo.gl/DiODcW" class="img-responsive" id="myImage"></a>

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

2 个答案: