选择列表在悬停时关闭 jQuery 悬停时显示/隐藏 Div 中的选项
Select List closes on hover of Option inside jQuery Show/Hide Div on Hover
我通过jQuery设置了一个div,以便在将鼠标悬停在项目上时显示和隐藏。在div 中,我有下拉菜单,但是当我单击"选择列表"并将鼠标悬停在"选项列表"上时,"选择菜单"会立即关闭。
j查询:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(".tiptext").mouseover(function() {
$(this).children(".description").show();
}).mouseout(function() {
$(this).children(".description").hide();
});
});//]]>
</script>
.HTML:
<div class="description" style="display: none;">
<div id="tab1">
<h2>Calendar Use</h2>
<p>Available dates are marked in white, those unavailable are black. The holiday villa is available from 4:00pm on the day of arrival and needs to be vacated by 10:00am on the day of departure. If you have earlier flight arrival times kindly contact us directly.</p>
</div>
<div id="tab2">
<h2>Check Availability</h2>
<br><p>Arrival Date</p>
<div id="calendar-titles"><span class="day-t">day</span><span class="month-t">month</span><span class="year-t">year</span></div>
<form method="post" action="">
<div id="calendar-container"><select id="year2Sel" name="year2Sel" onchange="showRSS(document.getElementById('field2').value"></select><select id="monthSel" name="monthSel" onclick="showRSS(document.getElementById('field2').value, document.getElementById('yearSel').value, this.value, document.getElementById('daySel').value )"><option value="0">January</option><option value="1">February</option><option value="2">March</option><option value="3">April</option><option value="4">May</option><option value="5">June</option><option value="6">July</option><option value="7">August</option><option value="8">September</option><option value="9">October</option><option value="10">November</option><option value="11">December</option></select><select id="daySel" name="daySel" onchange="showRSS(document.getElementById('field2').value, document.getElementById('yearSel').value, document.getElementById('monthSel').value, this.value )"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></div>
<select id="yearSel" name="yearSel" onchange="showRSS(document.getElementById('field2').value, document.getElementById('yearSel').value, document.getElementById('monthSel').value, document.getElementById('daySel').value)">
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
<div id="avail-left">
<p>No of Nights</p>
<span>min stay: 7 nights</span>
<input type="text" id="field2" name="nights" onkeyup="showRSS(this.value, document.getElementById('yearSel').value, document.getElementById('monthSel').value, document.getElementById('daySel').value)" value="" alt="Test" onkeypress="return isNumberKey(event)" onchange="isValid();">
</div>
<div id="avail-right">
<p>Est. Rate</p>
<div id="rssOutput"></div></div>
<input type="submit" value="Enquire" name="submit" class="enquirebtn">
</form>
<br>
</div>
<div id="tab3">
<iframe width="243px" height="221px" src="/calendar/index.php" frameborder="0" border="0" style="border:0px;"></iframe>
</div>
</div>
有人对如何解决这个问题有建议吗?
使用 mouseenter
和 mouseleave
而不是 mouseover
和 mouseout
如果用户将鼠标悬停在给定元素中嵌套的元素上或移出给定元素,则会为给定元素触发鼠标悬停和 mouseout 事件。
$(".tiptext").mouseenter(function() {
$(this).children(".description").show();
}).mouseleave(function() {
$(this).children(".description").hide();
});
如果您想知道这些之间的区别,此链接将很有帮助
相关文章:
- aspx中鼠标悬停时横向扩展DIV
- 在悬停时显示一个DIV,在悬停的另一个DIV.使用CSS
- 使其在悬停文本时显示Div
- 当我将鼠标悬停在iframe上时,DIV会闪烁
- 使用 Javascript 悬停将 Div 复制到页面上的其他位置
- 交叉淡入淡出 DIV + 悬停时停止动画
- jQuery 悬停/单击事件位于同一 DIV(移动设备)上
- Div 单击和悬停效果父级到子级
- 在鼠标悬停时显示/隐藏 DIV
- IE DIV悬停区域不一样.直到我添加背景颜色
- 悬停/单击DIV列表
- 多个 DIV 悬停在点击问题上
- 在 IE8 中将 DIV 从光标下方移动时,悬停样式保持不变
- 当鼠标悬停在其上时,Div 会闪烁
- 在 Div 悬停时暂停音频
- 弹出 Div 显示在按钮悬停上
- 内部 DIV 颜色文本在鼠标悬停时没有更改
- 拉斐尔JS - 悬停 - 显示/隐藏单独的 DIV
- 更改全屏背景并在 DIV 悬停时添加文本
- jQuery:悬停Div以显示Sibling