0

Estoy practicando (apenas estoy aprendiendo) y hay un ejercicio que no logro hacer. la idea es hacer que al pasar por encima de un texto (detonador) otra parte de texto cambie de tamaño cambiándole las propiedades del Css, pero solo si tiene una clase especifica (.detonador), el código que tengo es así:

<html>
<head>
<style>

  .afectado {
  color: blue;
  }
  .detonador{
  color: red;
  }

  #esteCambia, #esteDetona{
  font-family: arial;
  }
  #esteCambia{
  font-size:13pt;
  transition: ease 0.5s;
  }

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $(".detonador").hover(
    
   
        function(){
          if($("#esteDetona").is(".detonador")){
              $("#esteCambia").css({"font-size": "18pt"});
              }, function(){
              $("#esteCambia").css({"font-size":"12pt"});
          }
        
        }
        ); 
});
</script>

</head>
<body>

    <p id="esteDetona" class="detonador">Texto detonador <p>

    <p id="esteCambia" class="afectado"> Texto que cambia <p>

</body>
</html>

También intenté dejar el If justo abajo de la funcion hover, asi:

<script>
$(document).ready(function(){
    $(".detonador").hover(
    
      if($("#esteDetona").is(".detonador")){
         function(){          
         $("#esteCambia").css({"font-size": "18pt"});
         }, function(){
         $("#esteCambia").css({"font-size":"12pt"});
         }
      }
     ); 
});
</script>

Pero ninguno funciona ¿Alguien me puede decir que estoy haciendo mal?

2 respuestas 2

0

Creo que esto te puede servir.

.afectado {
  color: blue;
  }
  .detonador{
  color: red;
  }

  #esteCambia, #esteDetona{
  font-family: arial;
  }
  #esteCambia{
  // font-size:13pt;
  transition: ease 0.5s;
  }
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <p id="esteDetona" class="detonador">Texto detonador <p>
    <p id="esteCambia" class="afectado"> Texto que cambia <p>
    
<script>
$(document).ready(function(){
  setInterval(function(){
    if  ($("#esteDetona").is(":hover")) {
       $("#esteCambia").css({"font-size": "18pt"}); 
    }
    else {
       $("#esteCambia").css({"font-size": "12pt"});
    }
}, 200);

 });
</script>
</body>
</html>

En base a este enlace

0

No he revisado a fondo tu código pero si que veo una cosa mal:

el método is no se utiliza para conocer si hay elementos del DOM que tienen clases, sino que se utiliza para conocer determinados "estados" de un elemento:

$('#boton').is(':visible');
$('#checkbox').is(':cheked');

Si quieres conocer si un elemento tiene una determinada clase, utiliza en su lugar el método hasClass (fijate en que no se pone el selector de clase porque evidentemente el método hace referencia a la clase):

$('p').hasClass('column');

Creo que lo que buscas es esto:

$(document).ready(function(){
    $(".detonador").hover(function(){
          $('.afectado').css({"font-size": "18pt"});
    },function(){
          $('.afectado').css({"font-size": "12pt"});
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
<p class="detonador">conubia iaculis tincidunt nulla fames diam sagittis, tellus mi eleifend donec tortor egestas quam. Euismod venenatis netus gravida nam congue
</p>

<p class="afectado">habitasse torquent hac, rhoncus ridiculus vestibulum quisque auctor nunc vivamus.
</p>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.