Como escrever: condição de foco para a: before e a: after?

347

Como escrever :hovere :visitedcondição para a:before?

Estou tentando, a:before:hovermas não está funcionando

css css-selectors pseudo-element pseudo-class Jitendra Vyas
fonte

Respostas:

488

Isso depende do que você está realmente tentando fazer.

Se você simplesmente deseja aplicar estilos a um :beforepseudo-elemento quando o aelemento corresponde a uma pseudo-classe, você precisa escrever a:hover:beforeou a:visited:beforesubstituir. Observe que o pseudoelemento vem após a pseudo classe (e, de fato, no final de todo o seletor). Observe também que são duas coisas diferentes; chamá-los de "pseudo-seletores" vai confundir você quando você tiver problemas de sintaxe como este.

Se você está escrevendo CSS3, pode denotar um pseudoelemento com dois pontos para deixar essa distinção mais clara. Portanto, a:hover::beforee a:visited::before. Mas se você estiver desenvolvendo para navegadores herdados, como o IE8 e anteriores, poderá usar apenas dois pontos únicos.

Esta ordem específica de pseudo-classes e pseudo-elementos é declarada na especificação :

Um pseudoelemento pode ser anexado à última sequência de seletores simples em um seletor.

Uma sequência de seletores simples é uma cadeia de seletores simples que não são separados por um combinador. Sempre começa com um seletor de tipo ou seletor universal. Nenhum outro seletor de tipo ou seletor universal é permitido na sequência.

Um seletor simples é um seletor de tipo, seletor universal, seletor de atributo, seletor de classe, seletor de ID ou pseudo-classe.

Uma pseudo-classe é um seletor simples. Um pseudoelemento, no entanto, não é, embora se assemelhe a um simples seletor.

No entanto, para pseudo-classes de ação do usuário como :hover1 , se você precisar que esse efeito seja aplicado somente quando o usuário interagir com o próprio pseudo-elemento, mas não com o aelemento, isso não será possível senão por meio de uma solução alternativa dependente de layout obscura . Como está implícito no texto, atualmente os pseudoelementos CSS padrão não podem ter pseudo-classes. Nesse caso, você precisará aplicar :hovera um elemento filho real em vez de um pseudoelemento.

1 Obviamente, isso não se aplica a pseudo-classes de link, :visitedcomo na pergunta, pois pseudo-elementos não são links.

BoltClock
fonte
27
Deve-se ressaltar que isso coloca o cursor sobre o elemento pai - o que faz com que a decoração seja aplicada mesmo que o pseudoelemento :: after não esteja sob o mouse, enquanto o pai estiver.
SamGoody
6
Também deve-se notar que há várias coisas que não respondem a isso devido à maneira como as regras de layout são especificadas - por exemplo text-decoration.
precisa saber é o seguinte
11
@ Chris Krycho: De fato - eu realmente tenho uma explicação para esta questão específica com relação aos pseudo-elementos aqui . Obviamente, vale esclarecer que o problema em si não tem conexão com os seletores de pseudo-classe / pseudo-elemento , mas é, como você aponta, um problema de layout.
BoltClock
@BoltClock Eu votei essa resposta muito pouco depois de deixar este comentário. Huzzah.
precisa saber é o seguinte
2
Dois pontos Sinlge (:) designam pseudo-classes e dois pontos duplos (: :) designam pseudo-elementos. Assim deve ser a: hover :: antes
mikkelbreum
107

Escreva em a:hover::beforevez de a::before:hover: exemplo .

sandeep
fonte
2
@mikkelbreum você tem uma referência para provar isso?
shea
3
@ Bungeshea: Essa é a sintaxe CSS3. Veja os comentários na minha resposta (bem como na minha edição recente). É um pouco impreciso chamá-lo de "a" sintaxe correta, porque os dois pontos simples e duplos são permitidos para pseudoelementos CSS1 / 2. Eu chamaria isso de sintaxe recomendada , porque o único motivo para continuar usando a sintaxe herdada hoje é oferecer suporte ao IE8 e mais antigo.
BoltClock
@mikkelbreum @sheabunge mais informações sobre CSS2 :aftervs CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (single :tem melhor suporte)
travis
não está funcionando para sublinhado :( jsfiddle.net/porzechowski/u5dhthvq Por favor, adicione também display: bloco inline; jsfiddle.net/porzechowski/u89fo4oq
plusz 21/17
7

Para alterar o texto do link do menu ao passar o mouse. (Texto de idioma diferente ao passar o mouse) aqui está o

exemplo jsfiddle

html:

<a align="center" href="#"><span>kannada</span></a>

css:

span {
    font-size:12px;
}
a {
    color:green;
}
a:hover span {
    display:none;
}
a:hover:before {
    color:red;
    font-size:24px;
    content:"ಕನ್ನಡ";
}
Rao
fonte
11
Esta é uma resposta adorável. Na verdade, ele me inspirou a estender um pouco o violino , aumentando o tamanho da fonte do texto de amplitude para 24px para corresponder ao texto de substituição, adicionando 3 espaços sem quebra antes e depois do texto de substituição, para que eles ocupem a mesma largura, e a:hover::beforecom o estilo text-decoration: underline, o que faz com que o sublinhado escolha a cor vermelha do texto de substituição.
Dave Terra
4

Tente usar .card-listing:hover::after hovere afterusá- ::lo funcionará

subindas pm
fonte
1

A resposta do BoltClock está correta. A única coisa que quero acrescentar é que, se você quiser selecionar apenas o pseudo elemento, coloque um espaço.

Por exemplo: 

<li><span data-icon='u'></span> List Element </li>

ao invés de:

<li> data-icon='u' List Element</li>

Dessa forma, você pode simplesmente dizer

ul [data-icon]:hover::before {color: #f7f7f7;}

que destacará apenas o pseudo elemento, não o elemento li inteiro

bbrinx
fonte
-2

Você também pode restringir sua ação a apenas uma classe usando o colchete direito (">"), como fiz neste código:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    span {
    font-size:12px;
    }
    a {
        color:green;
    }
    .test1>a:hover span {
        display:none;
    }
    .test1>a:hover:before {
        color:red;
        content:"Apple";
    }
  </style>
</head>

<body>
  <div class="test1">
    <a href="#"><span>Google</span></a>
  </div>
  <div class="test2">
    <a href="#"><span>Apple</span></a>
  </div>
</body>

</html>

Nota: A opção hover: before funciona apenas na classe .test1

Stefan Gruenwald
fonte