Keep div:hover open when changing nested select box

Posted by JMC Creative on Stack Overflow See other posts from Stack Overflow or by JMC Creative
Published on 2011-01-03T16:51:30Z Indexed on 2011/01/03 16:53 UTC
Read the original article Hit count: 220

Filed under:
|
|

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>

© Stack Overflow or respective owner

Related posts about html

Related posts about css