我的WordPress博客上有一个搜索表单,输入图像有onmouseover和onmouseout事件。在这些事件期间,这些图像的定位不应改变。在我的桌面上,一切正常(图像更改,但不移动)。但是,在我的移动浏览器(Chrome,在三星Galaxy S4上)上,输入图像弹出div并成为已卸载的图像,一旦您单击它以执行搜索。
这是 HTML :
<div class="searchform-div">
<form method="get" class="searchform" action="<?php echo home_url(); ?>/">
<input type="search" id="s" name="s" placeholder="Search. . .">
<input type="image" id="searchButton" src="<?php bloginfo('template_directory'); ?>/images/searchbutton.png" onmouseover="this.src='<?php bloginfo('template_directory'); ?>/images/searchbuttonhover.png'" onmouseout="this.src='<?php bloginfo('template_directory'); ?>/images/searchbutton.png'">
</form>
</div>
而且,这是CSS:
.searchform {
width: 100%;
height: 27px;
padding: 3px 10px 0 0;
box-shadow: inset 2px 2px 3px 0 #7b7b7b;
-moz-box-shadow: inset 2px 2px 3px 0 #7b7b7b;
-webkit-box-shadow: inset 2px 2px 3px 0 #7b7b7b;
background-color: #ECECEB;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.searchform-div {
width: 100%;
height: 34px;
margin: 10px 0 10px 0;
max-width: 850px;
}
#s {
margin-left: 3px;
padding-top: 2px;
background-color: #ECECEB;
width: 94%;
height: auto;
}
#s:focus {
outline-color: #ECECEB;
}
#searchButton {
margin-bottom: -6px;
background-color: #ECECEB;
}
如果您在移动浏览器上转到http://www.genielauren.com/blog/并使用搜索表单,则可以准确了解我在说什么。
我只是想知道如何阻止图像弹出div,以及为什么onmouseover图像无法在移动浏览器上加载。