Javascript HTML select元素上的焦点转移问题

我有一个由许多行组成的表单，类似于下面的HTML-

<div style="display: table-row">
     <div style="display: table-cell">
          <label for="Region">Region</label>
     </div>
      <div style="display: table-cell">
           <select  id="Region" name="Region">
               <option value="">Please Select</option>
               <option value="AL">Alabama</option>
               <option value="AK">Alaska</option>
               <option value="AS">American Samoa</option>
           </select>
      </div>
</div>

区域
请选择
阿拉巴马州
阿拉斯加州
美属萨摩亚

我有一个HoverOut事件，当用户将鼠标光标移出最外层时触发，该事件会从行中的输入字段中移除焦点。我有一些样式，当行有焦点时应用于该行，当鼠标不在上面时删除它。我的问题是Select语句和IE7/8

如果是FF5，如果我正在使用鼠标从选择下拉列表中选择一个条目，那么一切都会按预期进行。然而，在IE7/8中，当我试图从下拉列表中选择一个条目时，当鼠标光标离开div标记区域时，外行会收到mouseout事件（触发hover out）。如果我将鼠标停留在div上，并使用光标键来导航列表，则效果良好

我的问题是，当我还在从选择列表中选择一个值时，有没有一种方法可以防止mouseout事件被传递到外部行

您可以在

上看到工作演示。您可以使用此

event.stopPropagation();

这将停止事件传播