JQuery / Javascript: IE pairar não cobre selecione opções da caixa?

Question

Eu tenho este pedaço de script para alargar uma caixa de texto no mouseover e encurtá-lo em MouseOff.

O problema que estou tendo é que o Internet Explorer não parece estendê-lo de pairar sobre as opções de uma caixa de seleção.

Isto significa, em IE eu posso clicar no seleto, tem as opções suspensa, mas se eu tentar selecionar um, eles desaparecem e as re-tamanhos Selecione a caixa assim que eu mover para fora da própria caixa de seleção.

Exemplo de código:

<script type='text/javascript'>
$(function() {
$('#TheSelect').hover(
    function(e){
        $('#TheText').val('OVER');
        $(this).width( 600 );
    },
    function(e){
        $('#TheText').val('OUT');
        $(this).width( 50 );
   }
);
});
</script>

E:

<input type='text' id='TheText' /><br /><br />

<select id='TheSelect' style='width:50px;'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='3'>Three</option>
    <option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
    <option value='5'>Five</option>
    <option value='6'>Six</option>
    <option value='7'>Seven...</option>
</select>

Existem soluções alternativas para caixas de seleção no IE? Eu consideraria mesmo um substituto jquery se alguém pode recomendar um que é realmente confiável.

Obrigado!

Answer 1

Aparentemente IE não considera o drop down parte do elemento select bit. É factível, mas é preciso um pouco de batota com propriedades expando e eventos borrão / FOCUS para ativar e desativar o efeito 'esconder' para pará-lo chutar em quando o mouse entra na parte drop-down do elemento.

Tenha ir com isso:

$(function() {
    var expand   = function(){ $(this).width(600) }
    var contract = function(){ if (!this.noHide) $(this).width(50) }
    var focus    = function(){ this.noHide = true }
    var blur     = function(){ this.noHide = false; contract.call(this) }
    $('#TheSelect')
        .hover(expand, contract)
        .focus(focus)
        .click(focus)
        .blur(blur)
        .change(blur)
});

(Desculpas se esta não é a forma como é suposto usar jQuery - Eu nunca usei isso antes:))

Answer 2

Looks como este post tem sido até por um tempo, mas espero que ainda existem pessoas interessadas em uma solução alternativa. Eu experimentei este problema ao construir um novo site que eu estou trabalhando. Por isso é um slider produto, e para cada produto, passar o mouse sobre o produto aparece uma grande bolha informativo com informações sobre o produto, uma lista suspensa para selecionar opções de compra, e um botão de compra. Eu descobri rapidamente que a qualquer momento o meu mouse deixou a área visível inicial do menu de seleção (ou seja, tentando selecionar uma opção), toda a bolha iria desaparecer.

A resposta (obrigado, gente inteligente que se desenvolveram jQuery), era tudo sobre subida do evento. Eu sabia que a maneira mais simples para corrigir o problema tinha de ser temporariamente "desabilitar" o estado fora do foco. Felizmente, jQuery tem uma funcionalidade construído em lidar com subida do evento (que eles chamam de propagação).

Basicamente, com apenas cerca de uma linha ou assim de novo código, me acompanha um método para o "OnMouseLeave" caso de suspenso (passar o mouse sobre uma das opções na lista de seleção parece provocar este evento de forma confiável - Eu tentei um alguns outros eventos, mas este parecia ser bastante sólido) que desligou a propagação do evento (ou seja, elementos pai não foram autorizados a ouvir sobre o "OnMouseLeave" evento no menu suspenso).

Era isso! Solução foi muito mais elegante que eu esperava que fosse. Então, quando as folhas do rato a bolha, o estado fora dos gatilhos pairar normalmente eo local continua sobre seu negócio. Aqui está a correção (eu colocá-lo na document.ready):

$(document).ready(function(){
  $(".dropdownClassName select").mouseleave(function(event){
    event.stopPropagation();
  });
});

Answer 3

A resposta de WorldWideWeb funcionou perfeitamente.

Eu tive um problema slighty diferente, eu tinha um efeito hover no item contendo (pairar para revelar um menu de seleção) do campo de formulário e em usuários do IE não poderia escolher a partir do drop-down (ele manteve a redefinição do valor) . Eu adicionei sugestão de WorldWideWeb (com o ID da seleção) e viola, funcionou.

Aqui está o que eu fiz:

$(".containerClass").hover(function() {
    $(this).children("img").hide();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
}, function() {
    $(this).children('img').show();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });

});

Answer 4

Eu tinha uma forma que estava escondido / mostrados com base em foco. Se o usuário focada na escolha da forma ficou escondido. Eu era capaz de resolver o meu problema com algo como isto:

element.find('select').bind('mouseenter mouseleave',function(){
    //Prevent hover bubbling
    return false;
});

Answer 5

tive o mesmo problema, ea resposta de WorldWidewebb funcionou muito bem no IE8. Eu só fiz uma pequena mudança, retirando "selecione" a partir do seletor, desde que eu incluído classe de caixa de seleção no seletor. Fez uma correção muito simples.

Além disso, eu tinha implementado em um menu que utiliza o hoverIntent jquery plugin, sem problemas. (Sem interferência).