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?