hover no va bien en Opera

Rankxerox1984 · #1 (**permalink**) 03/10/2012, 12:13

Hola a todos y todas:

Tengo un problema con el hover en Opera, tengo varios thumbnails a los que he aplicado iner box-shadow y se ven bien.
Sin embargo la propiedad hover la aplica mal, el primer thumbnail lo presenta correctamente, pero los siguientes, al deslizar el ratón lo aplica parcialmente (enm particular no lo aplica en el bottom de la imagen.

Dejo el código por si alguien puede probar y decirme cual es el fallo,

Muchas gracias por adelantado

Código HTML:

#thumbnails img {float:left;height:57px;width:71px;padding:7px;margin:0px 5px 0px 0px;
-moz-box-shadow:     inset 0 0 10px #e7e7e7;
-webkit-box-shadow:  inset 0 0 10px #e7e7e7;
box-shadow:          inset 0 0 10px #e7e7e7;
-o-box-shadow:       inset 0 0 10px #e7e7e7;}
#thumbnails :hover {
-moz-box-shadow:      inset 0 0 10px #888888;
-webkit-box-shadow:   inset 0 0 10px #888888;
box-shadow:           inset 0 0 10px #888888;
-o-box-shadow:        inset 0 0 10px #888888;}

pzin · #2 (**permalink**) 03/10/2012, 12:18

¿Has probado a eliminar el espacio entre el ID y la pseudoclase? En principio así no creo que funcione ni en Opera ni en ningún otro —igual alguno si, pero no sería un buen navegador.

furoya · #3 (**permalink**) 03/10/2012, 14:36

Yo veo tres problemas en tu planteo.

El primero es que falta el HTML. Así no sabemos dónde lo estás aplicando, y no dan ganas de probar nada si tenemos que escribir desde <html> hasta </html> nosotros mismos.

El segundo es que tampoco entiendo el efecto. Así como lo estás poniendo, hay una sombra para unas imágenes (¿flotantes?, ¡si las imágenes flotan solas, sin declaraciones de estilo!) que están metidas en "algo" que no sabemos qué es; y cuando le pasás el puntero encima a ese "algo", le aparece un borde sombreado que ¿interfiere? con el de las imágenes.
Si el efecto es un cambio de color en la sombra, se lo estás aplicando al elemento equivocado.

El tercer problema ... ah ... ya te lo comentó Bonez.

Rankxerox1984 · #4 (**permalink**) 03/10/2012, 17:05

En primer lugar agradeceros el tiempo y pedir disculpas por la falta de información. Furoya, con respecto del html es este:

Código HTML:

<!--Vistas seleccionables del producto-->
<div id="thumbnails">
	{embed="/embeds/product_images" entry_id="{freebie_last}"}
</div>

Lo que hay entre corchetes son variables de Expression Engine, el CMS que utilizo para el desarrollo de este proyecto. Estas variables rellenan una serie de 4 thumbnails que contienen diferentes vistas de un producto.
El CSS escrito en el post sirve para poner una sombre interna en los cuatro lados dentro del cuadro que contiene el thumbnail y en el hover cambia el color al pasar el ratón por encima.
Tal como está funciona bien con IE, FF, Crhome y Safari. Sin embargo con Opera no cambia el color correctamente en el hover. Lo uqe hace es que en el primer thumbnail que tocas lo cambia bien, pero cuando desplzas elratón a los demás thumnails se deja la parte del Bottom sin cambiar.

Bonez. He seguido tu indicación pero no resuelve el problema y además genera problemas adicionales. De momento lo he dejado así

Código HTML:

#thumbnails :hover{-moz-box-shadow:inset 0 0 10px #888888;-webkit-box-shadow:inset 0 0 10px #888888;box-shadow:inset 0 0 10px #888888;-o-box-shadow:inset 0 0 10px #888888;}

Pero sigue sin resolverse el problema inicial.
¿Podría ser un BUG de Opera?

MUchas gracias de nuevo por vuestra ayuda

furoya · #5 (**permalink**) 03/10/2012, 17:17

No. Seguís escribiendo mal, y no entendés lo que se te explica, porque en tu "corrección" el espacio sigue ahí, entre #thumbnails y :hover. Ni hablar de que seguro seguís aplicando formato al elemento equivocado.

Yo sé que no suena muy sutil, pero ... ¿tenés alguna idea de HTML y CSS?

El código que pusiste sigue incompleto, necesitamos algo entero que podamos probar, y falta lo más importante : el código generado por ese Expression Engine, el HTML que va entre la llaves, al que se le da el formato.

Aunque estoy seguro de que en cuanto corrijás el CSS tiene que salir andando. ¿Qué tan malo puede ser lo que te genera ese escript?.

Rankxerox1984 · #6 (**permalink**) 04/10/2012, 03:30

Hola de nuevo Furoya.
Efectivamente no eres nada sutil, pero no te preocupes por mí. Es posible que yo no entienda lo que se me explica dado mis limitados conocimientos de html y CSS, sin embargo tú no lees el contenido de los mensajes, si te fijas, dirigiéndome a Bonez digo:

Cita:

Bonez. He seguido tu indicación pero no resuelve el problema y además genera problemas adicionales. De momento lo he dejado así

Eso significa que he probado la sugerencia de Bonez tal como tú indicas amablemente en tu última respuesta y sigue sin funcionar correctamente.

El código generado es éste:

Código HTML:

<div id="thumbnails">
	<img src="../images/product/5-1Zoom.png">
	<img src="http:../images/product/5-2Zoom.png">
	<img src="http:../images/product/5-3Zoom.png">
	<img src="../images/product/5-4Zoom.png">		
</div>

En cualquier caso muchas gracias por tu ayuda,

J.

pzin · #7 (**permalink**) 04/10/2012, 04:24

Cita:

Iniciado por Rankxerox1984

y sigue sin funcionar correctamente

Es que cuando no hay código que ver, cosas que a priori son correctas pueden volverse incorrectas una vez visto el código.

Porque es diferente #thumbnails :hover a #thumbnails:hover. Y si no se sabe qué cosa es #thumbnails y dónde quieres realmente usar :hover, pues lo que se suele hacer es aplicar una lógica de depuración de errores. Y eso a ciegas, sin saber qué estilo es para cada elemento, es un poco loco. Por eso es importante e imprescindible postear HTML tanto como CSS en la mayoría de los casos.

Lamentablemente no tengo Opera instalado y no podría hacer una prueba rápida. Como tampoco conozco las bondades ni las deficiencias de Opera, yo probaría a ser más selectivo en mi css.

Con #thumbnails :hover le estás aplicando :hover a los elementos dentro de #thumbnails, que en principio no hubiera mayor problema, pero tal vez Opera —cosa que no sé, repito— necesite algo más de información. Así pues yo trataría de probar diciéndole que aplique :hover a elementos que sean imágenes dentro de #thumbnails.

Código CSS:

Ver original#thumbnails img:hover

Puede que funcione, puede que no.

furoya · #8 (**permalink**) 04/10/2012, 08:28

Hola de nuevo Rankxerox1984.

Gracias por confirmar mi falta de sutileza. Y por confirmar que (¡otra vez!) tengo razón, y que no tenés idea de CSS. Ni ganas de mirar manuales.
Antes de postear acá, deberías haberte leído al menos un par de tutoriales. Porque lo tuyo es un garrafal error de CSS.

Bonez tiene un poco más de paciencia, y te explicó con más detalle lo mismo que te dije más arriba (claro, si supieras de hojas de estilo lo hubieses captado en seguida sin más datos).
Donde sí tenías razón es en que no había entendido que ... en vez de corregir el código, habías repetido la misma burrada que pusiste antes.
Es que estoy buscando algo que valga la pena responder, y como este tipo de mensajes solamente sirve para educar a novatos que no saben cómo comportarse en un foro especializado, lo vi muy a las apuradas. Lo que menos me imaginé es que después de la explicación que recibiste, ibas a seguir en la tuya.

Te muestro cómo es que se postea un código para que lo probemos, así ya sabés para la próxima.

(Ésta es la sugerencia de Bonez, para cada imagen)

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>pirulo</title>

<style type="text/css">
#thumbnails img {height:57px;width:71px;padding:7px;margin:0px 5px 0px 0px;
-moz-box-shadow:     inset 0 0 10px #e7e7e7;
-webkit-box-shadow:  inset 0 0 10px #e7e7e7;
box-shadow:          inset 0 0 10px #e7e7e7;
-o-box-shadow:       inset 0 0 10px #e7e7e7;}
#thumbnails img:hover {
-moz-box-shadow:      inset 0 0 10px #888888;
-webkit-box-shadow:   inset 0 0 10px #888888;
box-shadow:           inset 0 0 10px #888888;
-o-box-shadow:        inset 0 0 10px #888888;}
</style>
</head>
<body>
<div id="thumbnails">
	<img src="http://imageshack.us/a/img221/4913/juancavallerozz.th.jpg">
	<img src="http://img826.imageshack.us/img826/4519/agustinalependa.th.jpg">
	<img src="http://img861.imageshack.us/img861/8427/josepereyralucena.th.jpg">
	<img src="http://imageshack.us/a/img220/8342/kavanaghproa.jpg">		
</div> 
</body>
</html>

(Y ésta para que funcione en todas juntas, como lo estabas planteando vos, pero bien hecho.)

Código:

#thumbnails:hover img {
-moz-box-shadow:      inset 0 0 10px #888888;
-webkit-box-shadow:   inset 0 0 10px #888888;
box-shadow:           inset 0 0 10px #888888;
-o-box-shadow:        inset 0 0 10px #888888;}

Bueno, también faltaría la versión de ponerle el borde sombreado al id, pero me parece que no es eso lo que buscás.

Está probado en Opera 12.02; Win/XP.

Rankxerox1984 · #9 (**permalink**) 05/10/2012, 02:59

Apreciado Furoya,

En primer lugar muchas gracias por tu ayuda (…la que haya sido).
Vamos a ver. Antes de decidirme a postear el problema aquí estuve mirando en:
http://www.css3.info/preview/box-shadow/
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
y
https://www.mozilla-hispano.org/docu...con_box-shadow
Lugares todos de reconocida solvencia. Desde el primer momento, encontré que en Opera, a pesar de lo que explicaban todos el efecto no funcionaba correctamente ¿Como es correctamente? Una vez más lo explico detalladamente para que lo entiendas:
El html generado que te envié y que no copio aquí para que el post sea manejable, renderiza cuatro elementos que contienen imágenes, todos los elementos que contienen imágenes tienen una sombra degradada interna que hace de marco para cada imagen. Cada una de estas imágenes se corresponde con una vista de producto y están separadas entre si, de manera que cuando pasas el cursor por encima de cada una de ellas (hover) todo el marco interno degradado cambia de color para resaltarla. Para utilizo el denostado CSS que tiene las instrucciones para cada una de las familias de navegadores. En todos los navegadores excepto Opera funciona correctamente.
Antes de decidirme a postear el problema para ver si alguien voluntaria, respetuosamente y de buena fe (creo que es el paradigma de este foro) podía ayudarme, he estado probando diversas alternativas semánticas jugando con las propiedades, el orden, los espacios, etc.. y el error en Opera persiste.
Probé la solución sugerida tan amablemente por Bonez (muchas gracias Bonez por tu ayuda y tus explicaciones) pero desafortunadamente no resuelve el problema, porque lo que sucede es que al eliminar el espacio entre THUMBNAILS y :HOVER el marco se extiende para toda la división THUMNAILS pero además sigue sin coger el HOVER en el bottom del elemento. Por otra parte, si uso la solución que me sugieres tú, simplemente el error persiste; pero curiosamente sólo para Opera.
En otro orden de cosas, tengo un curiosidad creciente por tu nivel de impertinencia, a lo mejor no sabes que contestar en el Foro es voluntario y por eso intentas machacar con tu falta de respeto a quienes pedimos ayuda, presuponiendo cosas que realmente ignoras. Relájate y disfruta de la vida que es muy corta.
Por el momento quiero que seas consciente, a la vista de los hechos, que tus aportes no han conseguido resolver nada. A lo mejor alguien más antes de mostrarse impertinente y pagado de si mismo debería leer tutoriales, pero no solo de CSS.
En cualquier caso muchas gracias y si necesitas algo sabes que puedes preguntarme,
Un saludo,

pzin · #10 (**permalink**) 05/10/2012, 03:39

¿Se te solucionó finalmente con la solución de furoya?

Rankxerox1984, en cuanto a la impertinencia y a la falta de educación, yo no la veo por ningún lado. Tal vez sea porque lo veo desde otra perspectiva. Antiguamente la gente entraba aquí sabiendo lo que hacía y preguntaba dudas, pero es que hoy en día vienen sin saber nada preguntando por y para que se le hagan las cosas. Y a veces rozando el más absurdo.

Tal vez tú si seas uno de aquellos que miran e intentan documentarse, bueno, de hecho parece que sí lo haces. A pocos conozco que realmente tengan interés de que las cosas funcionen en Opera.

Pero la mayoría no es así.

El caso es que de verdad, no veo falta de respeto. Tal vez las formas no sean demasiado acarameladas, pero eso no debe de ser malo en mi opinión. Pero no he visto ningún mensaje de furoya —que por cierto sólo hace una semana o así que lo veo por aquí ya que yo andaba mucho tiempo ausente, lo digo por descartar pensamientos de acciones defensivas por amistad— del cual alguien pueda decir que no se haya esforzado en redactarlo, aludir a fuentes, recomendaciones, soluciones, etc... Yo desde luego, prefiero que me den algo de caña pero aprender algo, a que me digan cómo hacer sin decirme el porqué para luego en unas semanas volver con la misma duda.

Pasa que también la gente a veces tiene una hipersensibilidad extrema en cuanto al uso de las palabras que en el fondo son correctas. Si a alguien que no sabe algo lo llamas ignorante, este se ofende, cuando realmente ignora algo. Yo a los aparcamientos para minusválidos, los llamo aparcamiento para subnormales. Los que no me conocen se quedan un poco descolocados, pero ¿qué culpa tengo yo de que la sociedad degenere palabras? Yo la estoy usando bien; sub-normal. Y nuestros hijos se insultarán llamándose minusválidos o especiales en algún futuro próximo y luego habrá uno como yo que diga aparcamiento de minusválidos...
Pues aquí es un poco lo mismo, a veces la gente se ofende porque se aplica el uso de palabras correctas sin llenarlo todo de pringosa y dulce miel.

pzin · #11 (**permalink**) 05/10/2012, 03:46

Cita:

Iniciado por Rankxerox1984

que tus aportes no han conseguido resolver nada

Los míos tampoco. Pero no lo dices por aquello de la miel, pero yo no me sentiría ni ofendido ni atacado si así lo hicieras porque realmente es verdad que no te he solucionado nada.

Rankxerox1984 · #12 (**permalink**) 05/10/2012, 08:23

Hola Bonez:

A ver. Yo solamente he pedido ayuda esperando que aquellos que me la pudieran prestar y así lo quisieran me la presten. Que yo sepa tú no has contestado obligadamente, has contestado por que te ha parecido bien, como yo, en su momento, había hecho también en este mismo Foro (si buscas, a lo mejor encuentras algún aporte mio, de hace bastante tiempo, la verdad).
A mí no me molesta que me digan que no sé de algo, es evidente que si posteo pidiendo ayuda no es por que tenga unos grandes conocimientos. Simplemente me pareció este caso digno de ser consultado por si a alguien le había sucedido igual y tenía la solución. En mi modesta opinión parece más un bug de Opera que un error de CSS.
Lo que no es admisible, en mi opinión, es hacer juicios de valor acerca de los demás sin conocerlos, simplemente por la deficiente redacción de un Post (…o no, solo hay que leer por ahí para ver que estamos dentro de la tendencia). En cualquier caso, ceo una diferencia de tono apreciable entre los mensajes del compañero Furoya y los tuyos, que sin caer en lo versallesco van al nudo de la cuestión y piden las aclaraciones que necesitan sin presuponer nada.
Creo que sin haber sido claramente ofensivo, Furoya tiende a un comportamiento innecesariamente Troll que a lo mejor el ignora que tiene y me ha parecido bien hacérselo ver por el bien de la calidad y el clima del Foro. Al fin y al cabo nadie está obligado a contestar un post ¿no?

En cualquier caso muchísimas gracias de nuevo por tu tiempo y tu dedicación. Si encuentro la solución la postearé aquí.

furoya · #13 (**permalink**) 05/10/2012, 08:48

Sí, Bonez. Sí lo solucionaste. Funciona perfectamente. Lo vi en Opera, Chrome y Firefox. Mi ejemplo, que es el tuyo con forma, queda igual en los tres.
Ya estoy un poco harto de los desubicados que no saben ni cómo plantear una duda, pero después se hacen los ofendidos. Por no hablar de los que después de que se les muestra la solución (que en la mayoría de los casos es simplemente aplicar CSS) te dicen que no les anda.

Lo bueno es que puse el código como corresponde. Así cualquiera con alguna duda sobre mi aporte lo puede probar.

Y volviendo contigo, Rankxerox1984, yo hubiese resumido el mensaje de Bonez con un "aprendé a leer!", pero el post de él quedó mejor.

Sobre tu código, si lo que puse (que se basa en lo que dejaste) no se parece a lo que tenés, entonces poné un ejemplo como corresponde. No somos adivinos para saber qué hace un programa que mete "algo" que tiene HTML en tu página. El que tiene que poner esas líneas sos vos, para que sigamos "voluntaria, respetuosamente y de buena fe" tratando de resolver el problema. Y no "creas que es el paradigma de este foro", no es el "paradigma" de ninguno. En los foros de debates se viene a debatir, si descubriste un bug o alguna situación que no tenga solución estándar, venís a hacer el aporte reportándolo, que es lo que corresponde. Ni tenés que venir a pedir 'soluciones personalizadas' para tus casos puntuales, ni podés esperar que acá te hagamos tu trabajo.

Y te voy adelantando : si decidís poner un código que podamos probar como se debe, ni se te ocurra mandar una parrafada de cincuenta mil líneas inútiles que no le hacen al problema. Porque te aseguro que a esas avivadas y faltas de respeto no las trato tan bien como te traté en el post anterior.

P.D.: No vi tu último mensaje. Después lo leo. Aunque no creo que agregue nada ni que mejore tu situación.