Aquí tengo varios div de forma predeterminada. Quiero mostrar el primer div y cuando no hay nada flotando, también se mostrará al menos cualquiera de un div.
¿Puede alguien sugerirme en la dirección correcta?
$('[class^="cr-box"]').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).css("opacity", "0"); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cr-wrap-icons"> <svg> <path class="cr-icon cr-icon-1" data-id="1" >icon 1</path> <img class="cr-icon cr-icon-2" data-id="2" >icon 2</img> <path class="cr-icon cr-icon-1" data-id="1" >icon 1</path> <path class="cr-icon cr-icon-3" data-id="3" >icon 3</path> <img class="cr-icon cr-icon-4" data-id="4" >icon 4</img> </svg> </div> <div class="cr-wrap-box"> <div class="cr-wrap"> <div class="cr-box cr-box-1 active" >test1</div> </div> <div class="cr-wrap"> <div class="cr-box cr-box-2" >test2</div> </div> <div class="cr-wrap"> <div class="cr-box cr-box-3" >test3</div> </div> <div class="cr-wrap"> <div class="cr-box cr-box-4" >test4</div> </div> </div>Si pudiera entender su necesidad, desea mostrar de forma predeterminada el primer div, luego, al pasar el ícono, desea mostrar su div relevante, y mantenerlo mostrado después de dejar de pasar los íconos,
Por lo tanto, es necesario crear una clase active que haga que el div sea visible,
/* by default make all divs hidden*/ div[class*="cr-box"] { visibility: hidden; } .active { visibility:visible !important; }; luego agregue esto último una vez que pase el mouse sobre un ícono al div relevante (por data-id ) como se muestra a continuación:
$('[class^="cr-icon"]').hover(function(i, e) { var id = $(this).attr('data-id'); // hide all divs $('[class^="cr-box"]').removeClass("active"); // show relevant hovered icon's div using data id var el = $(`[class^="cr-box-${id}"]`).addClass("active"); });Vea el siguiente fragmento:
$('[class^="cr-icon"]').hover(function(i, e) { var id = $(this).attr('data-id'); $('[class^="cr-box"]').removeClass("active"); var el = $(`[class^="cr-box-${id}"]`).addClass("active"); }); div[class*="cr-box"] { visibility: hidden; } .active { visibility:visible !important; }; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cr-wrap"> <path class="cr-icon cr-icon-1" data-id="1" >icon 1</path> <img class="cr-icon cr-icon-2" data-id="2" alt="icon 2" /> <path class="cr-icon cr-icon-1" data-id="1" >icon 1</path> <path class="cr-icon cr-icon-3" data-id="3" >icon 3</path> <img class="cr-icon cr-icon-2" data-id="2" alt="icon 2" /> <path class="cr-icon cr-icon-3" data-id="4" >icon 4</path> <path class="cr-icon cr-icon-3" data-id="5" >icon 5</path> <path class="cr-icon cr-icon-3" data-id="6" >icon 6</path> </div> <div class="cr-wrap"> <div class="cr-box-1 active" >test1</div> <div class="cr-box-2">test2</div> <div class="cr-box-3">test3</div> <div class="cr-box-4">test4</div> <div class="cr-box-5">test5</div> <div class="cr-box-6">test6</div> </div>