Hola mi consulta es la siguiente:

Como hago que un evento se mantenga hasta que no se seleccione otro y que al seleccionar otro se cancele el primero?

Os muestro el código que he hecho, para que os hagáis una idea de lo que quiero conseguir hacer.

Código :

<!DOCTYPE html>
<html>
<head>
<title>Que Pedo Con Vo Maje</title>


<style type="text/css">
#contenido-oculto1, #contenido-oculto2, #contenido-oculto3{
display:none;
}

</style>
</head>

<body>
<h1>Esta Es Una Prueba de Tienda Online</h1>
<button type="button" id="mostrarOculto1">Camisetas</button>
<button type="button" id="mostrarOculto2">Calsetines</button>
<button type="button" id="mostrarOculto3">Chuminadas</button>

<div id="contenido-oculto1"><p>Este es el texto de camisetas</p></div>
<div id="contenido-oculto2"><p>Este es el texto de calsetines</p></div>
<div id="contenido-oculto3"><p>Este es el texto de chuminadas</p></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script type="text/javascript">


$("#mostrarOculto1").hover(function(){
    $("#contenido-oculto1").show();
}, function(){
      $("#contenido-oculto1").hide();
});

$("#mostrarOculto2").hover(function(){
    $("#contenido-oculto2").show();
}, function(){
    $("#contenido-oculto2").hide();
});

$("#mostrarOculto3").hover(function(){
    $("#contenido-oculto3").show();
}, function(){
    $("#contenido-oculto3").hide();
});

</script>

</body>

</html>


MI idea es que cuando las personas se posicionen sobre el elemento que desean ver este se mantenga hasta que no seleccione otro, y que ocurra así en cada elemento, no sé si es demasiado pedir, pero me gustaría que pudiesen echarme un cable!! ;)