我正在尝试创建一个时尚的搜索功能，但它似乎没有正常工作。但是我无法解释整个代码，但是你看到了问题演示页面（底部的链接）。问题是，当用户在搜索查询中输入字符串时，我希望动态搜索与字符串匹配的关键字，并使用div和{{Ajax PHP下拉（淡出）div元素显示结果1}}。但目前还没有这样的功能。但我刚刚在div元素中添加了框架类型示例内容。
因此，当用户输入字符串时，<html>
<head>
head including scripts here......
<script type="text/javascript">
$(document).ready(function() {
$('div#search-bar').mouseover(function() {
$(this).stop().animate({ opacity : '1.0', top : '51px' },200,'linear',function () {
$('input.search-textbox', this).focus();
});
$('div.site-select span img').stop().animate({ opacity : '0.5' },200,'linear',function () {});
$('img.search-button').stop().animate({ opacity : '0.6' },200,'linear',function () {});
});
$('div#search-bar').mouseout(function() {
$(this).stop().animate({ opacity : '0.9', top : '60px' },200,'linear',function (e) {
$('input.search-textbox', this).blur();
$('div.search-keywords-framework').css('opacity','0.0').stop();
});
$('div.site-select span img').stop().animate({ opacity : '0.2' },200,'linear',function () {});
$('img.search-button').stop().animate({ opacity : '0.4' },200,'linear',function () {});
});
$('input.search-textbox').keyup(function (e) {
if ($('div.search-keywords-framework').css('opacity')==0)
{
$('div.search-keywords-framework').animate({ opacity : '1.0' },200,'linear',function () {$(this).stop();});
}
});
$('div.search-keywords-framework').mouseover(function () {
$('div#search-bar').css('opacity','1.0');
});
$('div.search-keywords-framework').click(function () {
$('div#search-bar').css('opacity','1.0');
});
$('div.site-select span img.prev').mouseover(function () {
$(this).animate({ opacity : '1.0' },200,'linear',function () { $(this).stop(); });
});
$('div.site-select span img.next').mouseover(function () {
$(this).animate({ opacity : '1.0' },200,'linear',function () { $(this).stop(); });
});
$('div.site-select span img').mouseout(function () {
$(this).animate({ opacity : '0.5' },100,'linear',function () { $(this).stop(); });
});
$('div.site-select span img.next').click(function () {
$(this).animate({ opacity : '1.0' },100,'linear',function () { });
});
$('div.site-select span img.prev').click(function () {
$(this).animate({ opacity : '1.0' },100,'linear',function () { });
});
$('img.search-button').mouseover(function () {
$(this).animate({ opacity : '1.0' },100,'linear',function () { $(this).stop(); });
});
$('img.search-button').mouseout(function () {
$(this).animate({ opacity : '0.6' },250,'linear',function () { $(this).stop(); });
});
$('div.site-select div.select-frame').cycle({
fx: 'fade',
speed: 500,
prev: 'div.site-select span img.prev',
next: 'div.site-select span img.next',
timeout: 0,
pause: 1,
cleartype: true,
before: selectsitetext,
after: selectsitetext
});
function selectsitetext() {
$('div.site-select input#select-site-text').val($(this).text());
}
$('a.menu-button').mouseover(function () {
$('img.over',this).stop().animate({ opacity : '1.0' },200,'linear',function () {});
});
$('a.menu-button').mouseout(function () {
$('img.over',this).stop().animate({ opacity : '0.0' },150,'linear',function () {});
$('img.click',this).stop().animate({ opacity : '0.0' },150,'linear',function () {});
});
$('a.menu-button').click(function (e) {
e.preventDefault();
$('img.click',this).stop().animate({ opacity : '1.0' },100,'linear',function () {});
});
});
</script>
</head>
<body>
other header framework here............
<div id="search-bar">
<table width="500px" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="search-frame-base-textbox-left"></td>
<td class="search-frame-base-textbox-mid">
<input type="textbox" class="search-textbox" />
<div class="search-keywords-framework" style="position: absolute; z-index: 500; margin: 0px 0px 0px -30px; opacity: 0.0;">
<table cellpadding="0" cellspacing="0" width="350px" style="font-family: Droid Sans; font-size: 12px;">
<tbody>
<tr>
<td style="background:url('img/search-keyword-bsae-top-left.png');width:17px;height:17px;background-repeat:no-repeat;"></td>
<td style="background:url('img/search-keyword-bsae-top-mid.png');height:17px;background-repeat:repeat-x;"></td>
<td style="background:url('img/search-keyword-bsae-top-right.png');width:17px;height:17px;background-repeat:no-repeat;"></td>
</tr>
<tr>
<td style="background:url('img/search-keyword-bsae-mid-left.png');width:17px;background-repeat:repeat-y;"></td>
<td style="background: rgb(242,242,242);">
<div style="padding: 5px 5px; width: 100%;"><a href="#" style="color: #333; text-decoration: none; font-size: 12px;">Search Demo 1</a><font style="float: right; background: #333; color: #fff; font-size: 10px; padding: 2px 5px; margin-right: 10px;">26</font></div>
<br>
And much more similiar keywords...........
</td>
<td style="background:url('img/search-keyword-bsae-mid-right.png');width:17px;background-repeat:repeat-y;"></td>
</tr>
<tr>
<td style="background:url('img/search-keyword-bsae-bottom-left.png');width:17px;height:17px;background-repeat:no-repeat;"></td>
<td style="background:url('img/search-keyword-bsae-bottom-mid.png');height:17px;background-repeat:repeat-x;"></td>
<td style="background:url('img/search-keyword-bsae-bottom-right.png');width:17px;height:17px;background-repeat:no-repeat;"></td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="search-frame-base-textbox-right"></td>
<td class="search-frame-base-site-bg">
<div class="site-select">
<div class="select-frame">
<font>All</font>
<font>Games</font>
<font>Music</font>
<font>Videos</font>
</div>
<span class="search-select-sites-nav-frame">
<img width="25px" height="21px" class="next" src="img/search-frame-base-site-trigger-close.png" />
<img width="25px" height="21px" class="prev" src="img/search-frame-base-site-trigger.png" />
</span>
<input type="hidden" id="select-site-text" />
</div>
</td>
<td class="search-frame-base-site-sep"></td>
<td class="search-frame-base-button-bg">
<img width="28px" height="30px" class="search-button" src="img/search-frame-base-button.png" />
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
footer framework...........
</body>
</html>
元素会淡入，但当用户将鼠标移到其上时，它就会淡出。我不知道问题是什么。所以请查看问题演示页面并查看代码，但我也在下面发布了Jquery代码，仅供参考。但是对于HTML代码，您必须查看此页面。任何人都可以帮助我解决这个问题，如果你想了解更多信息，请告诉我，我会提供。
{{1}}
答案 0 :(得分：2)
首先，我会强烈建议抛弃表格。如果它不打算显示为表格，则不应该有一个。如果一些问题来自这个事实，我不会感到惊讶。
那就是说，据我所知，当光标悬停div.menu-bar-base-small与div#search-bar重叠时会出现问题。如果您将代码重构为更简单的块/级体系结构而没有重叠（并且没有表），并且仅在绝对必要时使用position:absolute，我确信问题将自行消失。
例如，您现在拥有：
<table>
<td> <div> logo </div> </td>
<td> <div> search </div> </td>
</table>
<div class="menu-bar-base-small" style="position:absolute">...</div>
看起来应该更像
<div>
<div> logo </div>
<div> search </div>
</div>
<div class="menu-bar-base-small" style="position:relative">...</div>