1

我的 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 图像。

4

0 回答 0