如何将鼠标悬停在<img src=“">标签
How to put hover on <img src=""> tag?
我有一些困惑,我想在不使用"背景图像"的情况下将鼠标悬停在图像<img>
标签上。这样,当用户尝试鼠标悬停时,图像就会发生变化。我该怎么做?谢谢
1。内联JavaScript版本
<img src="a.jpg" onmouseover="this.src='b.jpg'" onmouseout="this.src='a.jpg'" />
this
指当前img
标签
2.CSS版本(推荐)
CSS
a.logo {
display:block;
width: 100px;
height: 100px;
background: url(/path/to/logo.png) no-repeat center center;
background-size: contain;
}
a.logo:hover {
background-image: url(/path/to/logo-hover.png);
}
HTML
<a href="#" class="logo"></a>
通过使用css,您可以获得更大的灵活性,它甚至可以在禁用JavaScript的环境中工作。
3.JavaScript处理程序
在高级情况下有用
var img = document.getElementById('myImg');
img.onmouseout = function () {
this.src = 'b.jpg';
};
img.onmouseover = function () {
this.src = 'a.jpg';
};
内联版本:<img src="original.jpg" onmouseover="this.src='hover.jpg';" onmouseout="this.src='original.jpg';" />
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src").match(/[^'.]+/) + "over.gif";
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src").replace("over", "");
$(this).attr("src", src);
});
});
设置为就绪状态:
img:hover {
background: url("https://i.stack.imgur.com/7KXRp.jpg");
/* padding: [image-height] [image-width] 0 0 */
padding: 200px 200px 0 0;
width: 0;
height: 0;
}
<img src="https://i.stack.imgur.com/9OcHP.jpg" />
相关文章:
- 在<script src=“"></脚本>标签
- 使用json数据更改视频标签中的src属性
- 如何通过单击更改对象标签 src
- 图片标签获胜't接受src
- 使用jQuery通过更改src属性来设置一个图像标签的动画
- 类似于htmls<script src=“">xaml的标签
- 使用angularjs交换图像标签中的ng-src属性
- 用JavaScript更改
标签src
- 使用 javascript 从图像数组中更改 img 标签 src.骰子游戏
标签和新的Image().src有什么区别
- 如何在
标签中获取来自 ng 控制器的 'src' 的数据
- 将 src 注入到 HTML5 的音频标签中
- 将图像从 img 标签的 src 上传到 php
- 脚本标签的动态创建和 src 加载在 ie10 中不起作用
- 脚本SRC标签加载index.jsp本身
- 我如何添加一个javascript变量到HTML图像src标签
- 在HTML文件中使用脚本SRC标签时,没有找到404
- 为什么Image 'complete'属性总是返回true,即使没有SRC标签
- Data-src标签在index.html中工作,但在angular视图中不起作用
- 在一个img src标签上显示不同格式的普通图像,以及base64图像