mouseover () mouseout () jQuery add / problema removeClass

Question

Eu estou tentando criar um efeito de mouseover simples usando uma combinação de mouseover, mouseout, addClass e removeClass. Basicamente, quando o usuário mouses sobre um elemento, eu quero aplicar uma borda diferente (1px frustradas cinza). O estado inicial é "1px branco contínuo". Eu tenho uma classe chamada "destaque", que simplesmente tem "border: 1px tracejada cinzenta" nele. Quero acrescentar que a classe onmouseover e removê-lo em onmouseout mas eu sou incapaz de obter o efeito que eu quero, a menos que eu uso! Importante dentro da classe "destaque".

Answer 1

Parece como se você tem o javascript funcionando bem como é, mas é apenas um problema com o especificidade de suas regras CSS , razão pela qual !important torna trabalho.

Você apenas tem que fazer o seu css destacou regras mais específicas do que as regras não realçado.

#someItem ul li { /* Specificity = 102 */
    border-color: white;
}

.highlight { /* Specificity = 10 -- not specific enough! */
    border-color: grey;    
}

#someItem ul li.highlight { /* Specificity = 112 -- this will work */
    border-color: grey;    
}

---

Editar com mais explicações:
Digamos que os trechos relevantes de seu olhar HTML como esta:

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

e você tem este CSS:

#someItem ul li {
    border: 1px solid white;
}
.highlight {
    border-color: grey;
}

Atualmente, todos os itens da lista na ul em #someItem div terá uma borda branca, e nada tem a highlight classe para nada é cinza.

Através de qualquer meio que você quer (no seu caso um evento de foco em jQuery), você adicionar uma classe para um dos itens:

$(this).addClass('highlight'); 

O HTML será agora algo parecido com isto:

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li class="highlight">Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

Até agora, o seu Javascript e HTML estão funcionando bem, mas você não vê uma borda cinza! O problema é o seu CSS. Quando o navegador está tentando decidir como o estilo do elemento, ele olha para todas as diferentes seletores que têm como alvo um elemento e os estilos definidos nos seletores. Se houver dois seletores diferentes, tanto que definem o mesmo estilo (no nosso caso, a cor da borda é contestada), então ele tem que decidir qual o estilo de aplicar e quais ignorar. Ele faz isso por meio do que é conhecido como "Especificidade" - isto é, como específico um seletor é. Conforme descrito no Dog HTML artigo , ele faz isso através da atribuição de um valor para cada parte do seu seletor, e aquele com o maior pontuação ganha. Os pontos são:

• selector elemento (por exemplo: "ul", "Li", "mesa") = 1 ponto
• seletor de classe (por exemplo: "DESTAQUE", ".active", ".menu") = 10 pontos
• seletor id (por exemplo: "#someItem", "#mainContent") = 100 pontos

Existem mais algumas regras, como por exemplo: a palavra-chave !important e também estilos inline, mas isso é em grande parte irrelevante para isso, uhh ... "lição". A única outra coisa que você deve saber é que se dois seletores têm a mesma especificidade, então o que foi definido mais tarde nas vitórias de arquivo.

Voltando para o seu problema, dada a CSS que tínhamos antes, podemos ver por que ele ainda não tem uma borda cinza:

#someItem ul li = id + element + element = 100 + 1 + 1 = 102 points
.highlight = class = 10 points

Como mencionado anteriormente, a solução é criar um seletor mais específico:

#someItem ul li.highlight
   = id + element + element + class
   = 100 + 1 + 1 + 10
   = 112 points

E para responder a sua pergunta nos comentários, você não precisa alterar qualquer um dos seus javascript ou HTML para que isso funcione. Se você quebrar este seletor, o que está dizendo é:

Procure o elemento com id "someItem", dentro daquele olhar para um elemento ul, e depois um elemento li que tem a classe "destaque" nele.

... e agora, dada a chamada .addClass() simples que você fez anteriormente, satisfaz li estas condições, de modo que a fronteira deve virar cinza.

Answer 2

De jQuery 1.3.3, você será capaz de fazer isso um pouco mais simples. Haverá um versão melhorada do .toggleClass () disponível, que vai ser muito poderosa.

Se você não precisa quebrar isso em uma função, em seguida, a partir de 1.3.3, você será capaz de simplesmente fazer:

$(".myclass").hover(function(){ $(this).toggleClass('highlight'); });

Se você está tendo para incluir! Importante, então sua classe destaque pode precisar de ser mais específica (ver CSS Especificidade ).

Answer 3

Eu estou supondo que você está usando um estilo inline no elemento para o estilo inicial:

<style type="text/css">
  .hover { border: 1px dashed gray; } /* will never apply */
</style>

...

<!-- this style has priority over class styles! -->
<div style="border: 1px solid white"> 
...
</div>

Isso irá substituir os estilos aplicados usando uma classe ... Então, em vez de usar estilos inline, basta usar uma classe inicial diferente para aplicar os estilos iniciais:

<style type="text/css">
  .normal { border: 1px solid white; }
  .hover { border: 1px dashed gray; }
</style>

...

<div class="normal">
...
</div>

Answer 4

Este é um exemplo de um foco que tenho usado:

$(".myclass").hover(jbhovershow,jbhoverhide);


jbhovershow = function () {
            $(this).addClass("jimtest");
          }; 

jbhoverhide = function () {
            $(this).removeClass("jimtest");
          }

você realmente não tem que quebrar algo tão simples se em funções separadas.

Eu suspeito que o problema pode ser com um conflito no css -. Tente apenas aplicando sua classe destaque por hardcodeing-lo, ou em um clique e veja se ele está realmente funcionando

Espero que ajude

Jim

Answer 5

Você já considerou uma abordagem CSS puro?

Por exemplo:

someClass {
    border: 1px solid white;
}

someClass:hover {
    border: 1px dashed gray;
}

A classe hover pseudo lhe dará o comportamento que você quer:. Quando o usuário está moused sobre o elemento, ele usará o estilo inferior, caso contrário ele irá usar o primeiro estilo

Nota: como alguém comentou, isso não funciona para elementos não a no IE. Isto, contudo, trabalhar para mim no Chrome, Firefox, Safari e Opera.

Ele também funciona para qualquer elemento no IE8 e IE7 modo padrão. Eu não tenho IE6 para teste com embora.

Answer 6

CSS:

div.target {
    border: 1px solid #000000;
}

div.target-hover {
    border-color: #ff0000;
}

JS:

$("div.target").hover(
    function () {
        $(this).addClass("target-hover");
    },
    function () {
        $(this).removeClass("target-hover");
    }
);

Eu costumo fazê-lo desta forma. (Permite mais opções)

Answer 7

Ou você pode simplesmente fazê-lo com simples CSS usando:

#namehere { border: 1px solid #fff; }
#namehere:hover { border: 1px dashed #aaa }