1

有人可以帮助我在 jquery 或 javascript 的帮助下为我的搜索按钮设置动画。每当用户悬停我的搜索按钮时，我希望搜索框出现（并在用户仍然在那里搜索某些内容时保持可见），但只要鼠标离开从那个搜索按钮或搜索框，这个小框应该消失。

<div class = "searchBox">
    <p id = "paragraph"><input type = "text" name = "serachBar"/>
    <input type = "button" value = "szukaj" name = "search"/>
    </p>
    <div id = "searchButton"><a href = "#">Search</a></div>
</div>

css

body{
background-color:rgb(138,187,129);

#searchButton{
position:fixed;
border:1px solid rgb(255,255,255);
border-top:none;
width:80px;
height:30px;
top:0px;
right:60px;
border-radius:0px 0px 3px 3px;
background:rgb(30,114,41);
}
#searchButton :hover{
background:rgba(0,0,0,0.3);
}
#searchButton a{
text-decoration:none;
font-size:20px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
text-align:center;
color:white;
padding:0;
margin:0;
display:block;
height:100%;
width:100%;
}

.searchBox p{
position:fixed;
border-bottom:1px solid rgba(255,255,255,0.3);
border-radius:2px;
box-shadow:0 1px 2px 2px #1F0000;
-moz-box-shadow:0 1px 2px 2px #1F0000;
-webkit-box-shadow:0 1px 2px 2px #1F0000;
border-top:none;
background:rgba(0,0,0,0.2);
width:200px;
height:50px;
top:0;
right:0;
margin:0;
visibility:hidden;
font-size:15px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
color:white;
}
4

2 回答 2

1

真的只是一个快速的答案。您可能需要对其进行编辑以确切地满足您的需要，但我相信您所追求的 jquery 类型如下：

$(document).ready(function(){
    $('#submit, #searchField').on('mouseenter', function(){
        $('#searchField').fadeIn(400);    
    }); 
    $('#submit, #searchField').on('mouseleave', function(){
        $('#searchField').fadeOut(400);    
    }); 
});

html:

<form>
    <input type="text" name="searchField" id="searchField"/>
    <input type="submit" id="submit" value="submit"/>
</form>

这也是一个小提琴

于 2013-04-26T19:15:36.797 回答
0

所以这是一种方法。只需在搜索框和搜索按钮之外设置一个 div 即可。然后设置 mouseenter 和 mouseleave 事件。您还需要检查是否输入了任何文本。这是一个小提琴：http: //jsfiddle.net/bgs7D/

 var $divContainer = $('#divContainer'),
 $txtSearch = $('#txtSearch'),
 $btnSearch = $('#btnSearch');

$txtSearch.hide();

$divContainer.on('mouseenter',function(){
    $txtSearch.show();
});

$divContainer.on('mouseleave',function(){
    if($txtSearch.val()==''){
        $txtSearch.hide();
    }
});

和html：

<div id= "divContainer"> 
<input id="txtSearch" type ="text" ></input>
<input id="btnSearch" type = "button" value="Search" ></input> 
</div>
于 2013-04-26T19:34:25.363 回答