Hay dos divs, ambos divs tienen un ícono en la esquina para editar sus propiedades. Quiero que solo un icono esté presente en un momento determinado. Al pasar el cursor sobre el div exterior, los iconos se muestran en la esquina del div exterior. Al pasar el cursor sobre el div interior, el cuadro de icono se muestra en ambos divs. ¿Cómo puedo suprimir el cuadro de iconos de divs externos cuando paso el mouse sobre div interno? Aquí está mi código
$(".icons").parent().hover(function() { // Mouse over $(this).find('.icons').first().css('display', 'block'); }, function() { // Mouse out $(this).find('.icons').first().css('display', 'none'); }); .outer{ width: 500px; height: 200px; background-color: fuchsia; display: flex; align-items: center; justify-content: center; position: relative; } .inner{ width: 300px; height: 100px; background-color: #2c132c; position: relative; } .icons{ content: '^'; size: 22px; background-color: gold; color: honeydew; width: 20px; height: 15px; position: absolute; top: 0; left: 0; display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="outer"> <div class="icons"></div> <div class="inner"> <div class="icons"></div> </div> </div>Quiero mostrar solo un cuadro de iconos a la vez . Entonces, cuando estoy dentro del div interno, no quiero mostrar los íconos del div externo.
Lo hice más flexible con mouseenter y mouseleave haciéndolo activo cuando ingresa al Div y cuando sale del Div, su padre estará activo
$(".show-icons").mouseenter(function (e) { // Mouse over $(".icons").hide(); $(this).find('.icons').first().show(); }); $(".show-icons").mouseleave(function (e) { // Mouse over $(".icons").hide(); $(this).parents(".show-icons").first().find('.icons').first().show() }); .outer { width: 500px; height: 200px; background-color: fuchsia; display: flex; align-items: center; justify-content: center; position: relative; } .inner { width: 300px; height: 100px; background-color: #2c132c; position: relative; display: flex; align-items: center; justify-content: center; } .inner-2 { width: 100px; height: 50px; background-color: #ccc; position: relative; } .icons { content: '^'; size: 22px; background-color: gold; color: honeydew; width: 20px; height: 15px; position: absolute; top: 0; left: 0; display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="outer show-icons"> <div class="icons"></div> <div class="inner show-icons"> <div class="icons"></div> <div class="inner-2 show-icons"> <div class="icons"></div> </div> </div> </div>La única forma en que puedo pensar en implementar esto sería mantener una verificación separada en JS, si el mouse se desplaza sobre el div interno, simplemente haga que se muestren los íconos del div externo: ninguno, sin embargo, no estoy tan seguro de cómo se implementará esto ya que no uso jquery hasta ahora y tampoco he investigado la función hover().
Puede hacer que, si el mouse pasa sobre el div externo, luego muestre sus íconos externos, y en caso de que vaya y también pase el mouse sobre el div interno, entonces puede configurar los íconos externos para que no se muestren y los internos para mostrar el bloque. . Es posible que necesite un detector de eventos para esto, creo.
Debido a que el div interno está completamente contenido dentro del div externo, solo puede escuchar los movimientos del mouse (sobre/fuera) en el div externo, seleccionar cuál es el elemento de destino y configurar/desconfigurar sus íconos para mostrar bloque/ninguno.
const outer = document.querySelector('.outer'); outer.addEventListener('mouseover', function (e) { e.target.querySelector('.icons').style.display = 'block'; }); outer.addEventListener('mouseout', function (e) { e.target.querySelector('.icons').style.display = 'none'; }); .outer{ width: 500px; height: 200px; background-color: fuchsia; display: flex; align-items: center; justify-content: center; position: relative; } .inner{ width: 300px; height: 100px; background-color: #2c132c; position: relative; } .icons{ content: '^'; size: 22px; background-color: gold; color: honeydew; width: 20px; height: 15px; position: absolute; top: 0; left: 0; display: none; } <div class="outer"> <div class="icons"></div> <div class="inner"> <div class="icons"></div> </div> </div>