Este es mi elemento que quiero seleccionar en jquery

.box3 span.info:before{
  content:"15 vacatures";
    margin:0;
    padding:0 0 28px 0;

    font-family: 'MaisonNeueMono';
    letter-spacing: normal;
    font-weight: normal;
    font-size: 12px;
    text-transform: uppercase;
    position:relative;
}

Intenté esto pero simplemente no lo selecciona, tampoco funciona con solo poner ".info": Entonces, ¿cómo selecciono este elemento?

$(".box3 span.info:before").hover(function(){
    $(".box3 h1").fadeOut();
});
1
Noob17 4 sep. 2014 a las 16:32

3 respuestas

La mejor respuesta

Elimine el :before, es solo la parte css, no se representa con el elemento, solo se usa para agregar css antes del elemento.

Solo necesitas escribir esto:

$(".box3 span.info").hover(function(){
    $(".box3 h1").fadeOut();
});
1
Ehsan Sajjad 4 sep. 2014 a las 12:34

No necesita pseudo selector aquí. necesitas usar:

$(".box3 span.info").hover(function(){
  $(this).closest('.box3').find('h1').fadeOut();
});
0
Milind Anantwar 4 sep. 2014 a las 12:36

El pseudo elemento before no es parte del selector, solo déjelo fuera:

$(".box3 span.info").hover(function(){
    $(".box3 h1").fadeOut();
});

Además, es posible que desee separar el estilo y la inserción de contenido de esta manera:

.box3 span.info {
    margin:0;
    padding:0 0 28px 0;

    font-family: 'MaisonNeueMono';
    letter-spacing: normal;
    font-weight: normal;
    font-size: 12px;
    text-transform: uppercase;
    position:relative;
}

.box3 span.info::before{ 
    content:"15 vacatures";
}
1
heikkim 4 sep. 2014 a las 12:34