jquery - mouseenter - Evento vacío div hover no se dispara en IE

mouseover javascript

Question

Tengo un div con un niño div dentro de ella. Estoy usando jQuery para mostrar / ocultar la división infantil cuando un mouse se desplaza sobre la división principal (la división principal abarca la parte inferior completa de la página. Ancho: 100% y altura 100 px). He usado Firebug y, por ejemplo, la barra de herramientas del desarrollador para confirmar que el div principal está en la página.

Puedo moverme sobre el div padre vacío en Chrome y FireFox y todo funciona bien. IE requiere que tenga algún tipo de texto en el interior para desplazarme. El evento div hover no se activará con solo un div vacío.

¿Todos los alrededores posibles para este problema?

--Actualizar

Probé todas tus sugerencias pero nada ha funcionado aún.

<div id="toolBar">          
  <div>
    <button id="btnPin" title="Click to pin toolbar" type="button">
      <img id="pin" src="../../images/icons/unpin.png" alt="Pin" /></button>
      <img src="../../images/icons/search.png" border="0" alt="Search" />
  </div>
</div>

El html anterior está contenido dentro de un contenedor de div de página maestra. El div niño se oculta con jQuery con algunos eventos de inover / alejar. El div padre (barra de herramientas) siempre está visible en la página. Cuando se produce un desplazamiento en la barra de herramientas, se muestra el div hijo.

Heres el código jQuery

$(''#toolBar'').hover(ToolBar_OnHover, ToolBar_OnBlur);

function ToolBar_OnHover() {

  $(this).children().fadeIn(''fast'');
  $(this).animate({ height: "100px" }, "fast");

}

function ToolBar_OnBlur() {

  $(this).children().fadeOut(''fast'');
  $(this).animate({ height: "50px" }, "fast");

}

Finalmente aquí hay un pequeño css

#toolBar { width: 100%; height: 100px; text-align:center; vertical-align:middle; position: absolute;  bottom: 0; background-color: Transparent;  }
#toolBar div { padding: 5px 5px 0px 5px; width:75%; height: 95px; background: transparent url(''/images/toolbar-background.png'') repeat-x; margin-right: auto; margin-left: auto; }

Answer 1

@Skateball: esa solución funciona, pero también oculta los elementos secundarios en FF / chrome. Aquí está mi toma:

background:#000;
background:rgba(0,0,0,0);
filter:alpha(opacity=0);

Answer 2

Descubrí que la mejor forma de hacer flotar un div de seguimiento de eventos del mouse sobre un área es hacer el ancho de div 1px y la altura que necesites. Luego, asigne al div un borde transparente a la derecha del ancho real que necesita. La razón por la que esto funciona mejor que una imagen transparente es porque si usa una imagen, entonces no puede rastrear los eventos de movimiento del mouse, por ejemplo, para arrastrar, sin que el div pierda el enfoque (en su lugar, arrastrará la imagen). Tuve este problema cuando se usaba un control deslizante de jQuery UI o un mouse para arrastrar una animación. Aquí hay una versión simple de cómo se veía mi código.

//container div to hold the animation images this part doesn''t really matter to answer the question
<div style="position:absolute; left:0px; top:0px; width:200px; height:200px">
// a bunch of images stacked like one of those animation flip books you made when you were a kid
   <img id="image01" src="blah01.jpg" />
   <img id="image02" src="blah01.jpg" />
   <img id="image03" src="blah01.jpg" />
   // and so on
</div>
//
// now the div that tracks the mouse events this is what I am describing to answer the question
// it could certainly be used above nav items and would have less load time than an image
<div style="position:absolute; left:-1px; top:0px; width:1px; height:200px; border-right: solid 200px transparent; />

En mi aplicación, por cada 2 px, el mouse se movió hacia la izquierda o hacia la derecha. Daría la visibilidad de imagen adecuada mientras escondía a todos los demás y al bingo tienes una animación. (La división vacía funcionó bien en todos los navegadores que no son IE, pero esto funcionó tanto en IE como en IE, por lo que no es necesario escribirlo de dos maneras).

Answer 3

Es una especie de hacky, y no sé si cambiará el diseño, pero siempre puedes poner un   dentro de la div.

Answer 4

Ninguno de los comentarios y filtros de cosas funciona para mí. El div nunca se renderiza, por lo que no es posible hover.

La solución definitiva:

.aDiv {
    background: transparent url(../images/transparent.gif) repeat;
}

Con una imagen gif transparente de un pixel. Claro que funciona!

Answer 5

Puede ser que el indicador hasLayout del elemento deba ser forzado. Esto se puede hacer mediante la aplicación de la propiedad CSS zoom:1 .

Answer 6

Sé que la pregunta ha sido respondida pero encontré el mismo problema. El div vacío no dispararía la función. Y si tuviera una frontera, solo la frontera misma iniciaría la función. Probé muchas cosas, nada ayudó. Aquí está mi solución, es casi lo mismo, solo que no usé una imagen. Agrega esto a tu CSS:

div { /* write the element''s name, class or id here */ background: #FFF; /* you can choose any colour you like, 1.0-fully visible */ opacity:0.0; /* opacity setting for all browsers except IE */ filter: alpha(opacity = 0); /* opacity setting for IE, 0-transparent & 100-fully visible */ }

Answer 7

Si desea conservar su DIV, esto funcionó para mí: background-color: rgba(0,0,0,0.001);

Answer 8

Si no tienes que soportar IE6. En su programa de gráficos (Photoshop) cree una imagen 1x1 de un cuadro blanco. Reducir la opacidad al 1%. Guardar como un PNG24 o GIF. Luego, haz de esta la imagen de fondo para el DIV transparente.

Esto resuelve el problema y preserva la opacidad de los elementos secundarios.

Answer 9

Simplemente inserte un comentario vacío dentro del elemento "vacío". :)

<div><!-- --></div>

Esto obligará a IE a renderizar el elemento.

Answer 10

Solo puede configurar la opacidad para que la capa sea invisible y también debe establecer el fondo

{
    background: white;
    opacity: 0;
}

Answer 11

funcionará si establece un color de fondo o un borde ...

Si pudiera combinar cualquiera de estos con el aspecto existente, entonces estaría bien ..

( Una imagen de fondo parece la solución más discreta )

Answer 12

.trasnparentIE
{
    background: url(../images/largeTransparent.gif) repeat;
}

cuando agregué el borde, el evento flotante solo se activó cuando el mouse estaba sobre o muy cerca del borde, pero no necesito el borde, así que solo uso el fondo transparente y funciona para mí ... el fondo transparente hizo el truco para mí (Los comentarios y nbsp tampoco funcionaron ...)