鼠标输出事件不起作用
Onmouseout event is not working
我有这个html:
<div class="baloon_signup" onmouseover="pinkImg(this)" onmouseout="whiteImg(this)">
<img src="images/prijavi.png" class="imageResponsive" />
</div>
这个JavaScript函数:
<script>
function pinkImg(x)
{
x.innerHTML = '<img src="images/prijaviH.png" class="imageResponsive" />';
}
function whiteImg(x)
{
x.innerHTML = '<img src="images/prijavi.png" class="imageResponsive" />';
}
</script>
在鼠标悬停事件时触发的函数 pinkImg 工作正常,但在鼠标输出事件上触发的 whiteImg 根本不起作用。我已经检查了图像路径,它们是正确的。当我将鼠标悬停在div上时,图像会发生变化,但是当我用鼠标外出时,图像保持不变。
提前谢谢你
与其更改div 的内部 HTML,只需更改图像元素本身的 src。
也许您的div 大于导致您的 onmouseout 事件不会被触发的图像。对于示例代码,div 的默认宽度为 100%。
试试这个示例代码,包括jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="baloon_signup" onmouseover="pinkImg()" onmouseout="whiteImg()">
<img src="http://www.clker.com/cliparts/1/5/4/b/11949892282132520602led_circle_green.svg.thumb.png" class="imageResponsive" />
</div>
<script>
function pinkImg() {
$('.imageResponsive').attr('src', 'http://www.clker.com/cliparts/5/7/b/5/1194989231691813435led_circle_red.svg.thumb.png');
}
function whiteImg() {
$('.imageResponsive').attr('src', 'http://www.clker.com/cliparts/1/5/4/b/11949892282132520602led_circle_green.svg.thumb.png');
}
</script>
尝试使用div id。
<div id="x" class="baloon_signup" onmouseover="pinkImg(x)" onmouseout="whiteImg(x)">
<img src="images/prijavi.png" class="imageResponsive" />
</div>
这里有jQUery的解决方案:http://jsfiddle.net/vgmppkdg/1/和.hover(whatIn,whatOut)函数
.HTML:
<div id="baloon_signup">
<img src="images/prijavi.png" class="imageResponsive" />
</div>
.JS:
var $baloon = $('#baloon_signup')
$baloon.hover(function(){
$baloon.html('x<img src="images/prijaviH.png" class="imageResponsive" />');
}, function(){
$baloon.html('y<img src="images/prijavi.png" class="imageResponsive" />');
});
试试下面的JavaScript代码。(未使用 jQuery)
<div class="baloon_signup" onmouseover="pinkImg()" onmouseout="whiteImg()" >
<img id="animate" src="https://www.gstatic.com/android/market_images/web/play_logo_x2.png" class="imageResponsive" />
function pinkImg(){
//alert('onmouseover');
document.getElementById("animate").src = "https://www.google.com/images/errors/logo_sm_2.png";
}
function whiteImg(){
//alert('onmouseout');
document.getElementById("animate").src = "https://www.gstatic.com/android/market_images/web/play_logo.png";
http://jsfiddle.net/ovkyqqdo/
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title></title>
<script>
function pinkImg(x) {
x.innerHTML = '<img src="http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg" class="imageResponsive" style="height:300px;width:300px" />';
return false;
}
function whiteImg(x) {
x.innerHTML = '<img src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" class="imageResponsive" style="height:300px;width:300px" />';
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="baloon_signup" onmouseover="pinkImg(this);" onmouseout="whiteImg(this);">
<img src="images/prijavi.png" class="imageResponsive" />
</div>
</form>
</body>
</html>
相关文章:
- JsFiddle上的鼠标事件不起作用
- 在IE8中不起作用的元素上触发单击事件
- 链接上的IE10 jquery句柄单击事件不起作用
- Javascript点击事件回调不起作用
- jQuery加载完成事件不起作用
- 覆盖单击事件不起作用
- 鼠标事件在OpenLaszlo应用程序中不起作用
- 单击事件不起作用
- 插入后单击锚点标记上的事件after不起作用
- 引导程序弹出窗口(bootbox)中的Javascript事件不起作用
- 按钮点击事件在弹出窗口中不起作用
- 在Chrome扩展选项页面中单击不起作用的事件
- 触摸事件在模式弹出窗口上不起作用
- 在所有浏览器中单击在 Nexus S ICS (4.0.4) 上不起作用的事件
- 单击新 DOM 元素不起作用的事件
- 触发事件在 Ajax Magnific 弹出窗口中不起作用
- 正在删除不起作用的事件处理程序:“;这个“;上下文在Javascript中丢失
- 弹出框单击事件不起作用
- 单击对添加到页面的数据不起作用的事件
- 在其他元素中,不起作用 PhoneGap 事件 API ex) 后退按钮