Evento div hover vacío que no se activa en IE

Question

Tengo un div con un div infantil dentro de él. Estoy usando jQuery para mostrar/ocultar el div infantil cada vez que un mouse se desplaza sobre el div principal (el div principal se extiende por toda la parte inferior de la página. Ancho: 100% y alto 100 px). He usado Firebug y la barra de herramientas del desarrollador para confirmar que el div principal está en la página.

Puedo desplazarme sobre el div principal vacío tanto en Chrome como en Firefox y todo funciona bien. IE requiere que tenga algún tipo de texto dentro para pasar el cursor sobre él. El evento div hover no se activará con solo un div vacío.

¿Hay alguna solución para este problema?

--update

intentado todas sus sugerencias, pero nada ha funcionado todavía.

<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 en un contenedor div principal. El div infantil está oculto con jQuery con algunos eventos de entrada/salida. El div principal (toolBar) siempre está visible en la página. Cuando ocurre un vuelo estacionario en toolBar, se muestra el div infantil.

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í está un poco de 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

que funcionará si se establece un fondo color o una frontera ...

si podría coincidir con cualquiera de estos con el aspecto existente, entonces estaría bien ..

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

Answer 2

Es una especie de hacky, y yo no sé si va a cambiar el diseño, pero siempre se puede simplemente ponga   dentro del div.

Answer 3

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

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

Esto forzará a IE para generar el elemento

Answer 4

Es posible que el indicador hasLayout del elemento deba forzarse. Esto se puede hacer aplicando la propiedad CSS zoom:1.

Answer 5

Sé que la pregunta ha sido respondida pero me encontré con el mismo problema. El div vacío no activaría la función. Y si tuviera un borde, solo el borde mismo comenzaría la función. Intenté muchas cosas, nada me ayudó. Aquí está mi solución, es más o menos lo mismo, solo que no usé una imagen. Añadir 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 6

@Skateball: esta solución funciona, pero también esconde cualquier elemento secundario de FF/cromo. Aquí está mi opinión:

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

Answer 7

Ninguno de los comentarios y filtros funciona para mí. El div nunca se representa, por lo que no es posible pasar el cursor.

solución definitiva:

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

imagen gif transparente a un píxel Con. Claro que funciona!

Answer 8

Encontré que la mejor manera de hacer flotar un divs de seguimiento de eventos de mouse sobre un área es hacer que el div tenga 1px de ancho y la altura que necesite. Luego, dale al div un borde transparente a la derecha del ancho real que necesitas. 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 mousemove, por ejemplo, para arrastrar, sin que el foco div pierda (en su lugar, arrastrará la imagen). Tuve este problema cuando se usaban tanto un control deslizante de la jQuery UI como una arrastre del mouse para eliminar 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 solicitud por cada 2 px movió el ratón izquierda o hacia la derecha me daría la visibilidad de la imagen adecuada al tiempo que oculta todos los demás y bingo que tiene una animación. (El div vacío funcionó bien en todos los navegadores no IE, pero esto funcionó tanto en IE como en no IE, por lo que no es necesario escribirlo de dos maneras).

Answer 9

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

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

Answer 10

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

cuando he añadido la frontera del evento emergente sólo activa cuando el ratón fue por encima o muy cerca de la frontera, pero no necesito la frontera, así que sólo tiene que utilizar de fondo transparente y funciona para mí ... la fondo transparente hizo el truco para mí (y comentarios nbsp tampoco funcionaba ...)

Answer 11

Sólo puede ajustar la opacidad para hacer la capa invisible y también debe establecer fondo

{ 
    background: white; 
    opacity: 0; 
} 

Answer 12

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