我有一个列表框,显示我mouseover
input
框的时间。我的问题是列表框即使我指定了CSS规则overflow:visible
它现在仍然显示整个列表框,而是它使列表框适合外部div
的宽度。
但如果我尝试使用Firefox或Chrome查看它,整个列表框都会显示。请帮忙。
谢谢, 雪利酒
更新:这是html代码
<div id="book_panel">
<div id="book_heading">
<div style="padding:5px 0 0 5px;">
<span style="font-size:22px; font-family: Arial, Verdana, Sans-Serif;">Book Now</span><span style="font-size:19px; font-family:Arial;color:#e9d59e;"> | </span>
<span style="font-size:12px; font-family: Arial, Verdana, Sans-Serif;color:#e9d59e;">Best rate guarantee</span>
</div>
</div>
<div id="booking_form_row1">
<div id="row1Row1"><label id="findHotel">Hotel</label></div>
<div id="row1Row2" >
<div id="hotelSelector">
<input id="txtHotel" name="txtHotel" value="Select a Hotel" runat="server" />
<input id="txtHotelValue" type="hidden" runat="server" />
<div class="restHotel">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td> <b>Hotels</b></td></tr>
<tr onclick="return setHotel(1,'Flora Grand, Near Al Ghurair Shopping Mall, Dubai');" class="highLightRow">
<td width="150px;"><a href="#" title="Flora Grand, Near Al Ghurair Shopping Mall, Dubai" id="lnkHotel1">Flora Grand</a></td>
<td width="200px;">Near Al Ghurair Shopping Mall</td>
<td width="50px;">Dubai</td>
<td><asp:Image ID="Image5" runat="server" ImageUrl="../media/images/four_star.png" Width="44" Height="8" /></td>
</tr>
</table>
</div>
</div>
</div>
</div>
这是css
#book_panel {overflow:visible!important;padding:0!important;max-height:330px;width:270px;position:absolute;color:#fff;top:120px; left:10px; z-index:9999; border: 0px red solid; background-color:#201913; filter: alpha(opacity=90); opacity: 0.9; -webkit-opacity: 0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=90)";}
#book_panel #book_heading {display:block;position:relative;border: 0px red solid; text-align:left; width:270px;margin: 0; height:30px;background-color:#362615;filter: alpha(opacity=90); opacity: 0.9; -webkit-opacity: 0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=90)";}
.hiLightRow{background-color:#201913; cursor:hand;}
#book_panel label {width:80px; display:block; margin:2px 0 5px 0;padding:0; float:left; color: #fff; font: normal 12px Arial, Verdana,sans-serif!important;}
#book_panel select{width:55px;color: #000;background: #f9f9f9;border: 1px solid #e9d59e; padding-left: 3px;}
#book_panel input {font-size:13px;}
#book_panel a:hover{background-color:#201913;color:#fff;}
#book_panel div#booking_form_row1 input {width:240px;}
#book_panel div#booking_form_row1 {float:left; width:250px;position:relative;margin: 0 10px 0 10px; border: 0px solid red;}
#book_panel div#booking_form_row1 #row1Row1 {width:250px;height:19px;float:left;margin-top:3px;}
#book_panel div#booking_form_row1 #row1Row2 {width:250px;float:left;margin-top:3px;border: 0px solid red;}
/*Hotel Fancy Listbox */
#book_panel div#booking_form_row1 #row1Row2 .restHotel{position:absolute;z-index:9999; width:450px!important;overflow:visible!important;}
#book_panel div#booking_form_row1 #row1Row2 table {float:left;margin:0;padding:0;width:450px!important;border:1px solid #a57e03;background-color:#6b5527;}
#book_panel div#booking_form_row1 #row1Row2 tr {width:450px;color:#fff;font: 12px Arial, Verdana, sans-serif;padding-left:3px;padding:2px 3px 2px 5px;overflow:visible!important;}
#book_panel div#booking_form_row1 #row1Row2 td a{color:#fff;font: 13px Arial, Verdana, sans-serif;padding:1px 2px 1px 4px;}
和我使用的jquery语法
$("#ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel").hover(function () {
$(".restHotel").slideDown("300");
});
$(".restHotel").mouseleave(function () {
$(this).slideUp("300");
});
答案 0 :(得分:0)
没有ID为“ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel”的元素,这是您在jQuery选择器中为slideDown()引用的内容。你可能想要这个:
$("#txtHotel").hover(function () {
$(".restHotel").slideDown("300");
});
您的div.restHotel元素默认设置为可见,因此它立即可见,而不是等待光标悬停在输入框上。
您的示例代码未定义JavaScript setHotel()方法。
除此之外,您的示例似乎使用IE8浏览器模式在IE9 Beta中工作。如果您的示例代码没有显示其他错误,那么您可能希望提供更多信息。