Keep div:hover open when changing nested select box
- by JMC Creative
This is an IE-only problem. .toolTip becomes visible when it's parent element is :hovered over. Inside of .toolTip is a select box. When the user opens the select box to make a selection, the parent element is being "un-hovered", if you will. To put it another way, when I try to select something from the dropdown, the whole thing hides itself again.
I'm sure it has something to do with the way IE interprets the stylesheet, but I don't know what or where. Here is some relevant code (edited for clarity):
#toolBar .toolTip {
position: absolute;
display:none;
background: #fff;
line-height: 1em;
font-size: .8em;
min-width: 300px;
bottom: 47px;
left: -5px;
padding: 0 ;
}
#toolBar div:hover .toolTip {
display:block;
}
and
<div id="toolBar">
<div class="socialIcon">
<a href=""><img src="/im/social/nytimes.png" alt="NY Times Bestsellers" /></a>
<span class="toolTip">
<h1>NY Times Bestsellers Lists</h1>
<div id="nyTimesBestsellers">
<?php include('/ny-times-bestseller-feed.php') ?>
</div>
<p><img src="/im/social/nytimes.png" alt="NY Times Bestseller Lists" />
Change List <select id="nyTimesChangeCurrentList" name="nyTimesChangeCurrentList">
<option value="hardcover-fiction">Hardcover Fiction</option>
<option value="hardcover-nonfiction">Hardcover Nonfiction</option>
<option value="hardcover-advice">Hardcover Advice</option>
</select>
</p>
</span>
</div>
</div>
