Question

我的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图像无法在移动浏览器上加载。

单击移动浏览器时输入图像移动

0 个答案: