Aquí quiero seleccionar atributos a la vez. Al pasar el mouse icon1, entonces test1 debería estar visible igual que para otros también. He intentado así pero no funciona. ¿Alguien puede sugerirme en la dirección?
$('[class^="cr-icon"]').hover(function() { $('[class^="cr-box"]').css("opacity", "1"); }, function() { $('[class^="cr-box"]').css("opacity", "0"); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cr-icons"> <svg> <path class="cr-icon-1">icon main image</path> <path class="cr-icon-1">icon inner img</path> <path class="cr-icon-2">icon main image</path> <path class="cr-icon-3">icon3</path> <path class="cr-icon-2">icon inner img</path> </svg> </div> <div class="cr-wrap"> <div class="cr-box-1">test1</div> <div class="cr-box-2">test2</div> <div class="cr-box-3">test3</div> </div>He hecho algunas enmiendas a su código. Espero que esto te ayude en lo que estás buscando. Los únicos cambios que he hecho es darle a cada uno de los íconos una identificación y, según la identificación, puede mostrar el texto respectivo. He cambiado el ícono al botón como para mi referencia. Puede cambiarlo de nuevo a un icono. He adjuntado un violín para su facilidad de uso.
JS Fiddle ejemplo más reciente
HTML
<div class="cr-wrap"> <button class="cr-icon-1" data-id="1">icon 1</button> <button class="cr-icon-2" data-id="2">icon 2</button> <button class="cr-icon-3" data-id="3">icon 3</button> </div> <div class="cr-wrap"> <div class="cr-box-1 default">test1</div> <div class="cr-box-2">test2</div> <div class="cr-box-3">test3</div> </div>JQUERY
$('[class^="cr-box"]').not('.default').css("opacity", "0"); $('[class^="cr-icon"]').hover(function (i, e) { var id = $(this).attr('data-id'); var el = $('[class^="cr-box"]')[id - 1]; $(el).css("opacity", "1"); }, function (i, e) { var id = $(this).attr('data-id'); $('[class^="cr-icon"]').each(function (i, e) { if (id != $(e).attr('data-id')) { var el = $('[class^="cr-box"]')[id - 1]; $(el).not('.default').css("opacity", "0"); } }); });