|
212
|
Programación / Desarrollo Web / [SOLUCIONADO] ¿Porque en un window.matchMedia() me funciona y en el otro no?
|
en: 28 Noviembre 2017, 20:21 pm
|
Hola, tengo una duda: Estoy haciendo una web, y tengo un calendario php-mysql y lo estoy haciendo responsive por la cual yo quisiera que dónde pone:Lunes,Martes,Miércoles,Jueves... En versión para tablets y moviles quisiera que se ponga reducido (L,M,X,J,V,S,D), para eso puse este código: <script> $(document).ready(function(){ if (window.matchMedia("(max-width:768px)").matches){ week1 = document.getElementById("dia1"); week1.innerHTML = "D"; week2 = document.getElementById("dia2"); week2.innerHTML = "L"; week3 = document.getElementById("dia3"); week3.innerHTML = "M"; week4 = document.getElementById("dia4"); week4.innerHTML = "X"; week5 = document.getElementById("dia5"); week5.innerHTML = "J"; week6 = document.getElementById("dia6"); week6.innerHTML = "V"; week7 = document.getElementById("dia7"); week7.innerHTML = "S"; } </script>
Cuyo código es para tablet y en teoría para móvil, pero funciona solamente para tablet en el móvil no me funciona, no se porque, probé de de poner doble función [window.matchMedia()], pero no funciona, y con css. <style> @media screen an (max-width:600px){ #dia1{ content: "D"; } #dia2{ content: "L"; } #dia3{ content: "M"; } . . . } </style>
Pero, tampoco funciona... Que esta pasando? Se puede poner la funcion con dos valores? ej: $(document).ready(function(){ if(window.matchMedia("(max-width:768px) and (max-width:600px)").matches){...} });
o $(document).ready(function(){ if((window.matchMedia("(max-width:768px)").matches) || (window.matchMedia("(max-width:600px)").matches) = true){...} });
Gracias de antemano.
|
|
|
213
|
Comunicaciones / Android / Como bloquear la movilidad de las apps en la pantalla de inicio en android ?
|
en: 26 Noviembre 2017, 14:15 pm
|
Hola, hay alguna app para bloquear la movilidad de las apps?
Es decir, yo cuándo viene mi abuela, con su móvil, me pidió que me ponga en la pantalla de inicio iconos de llamadas directo, y otras aplicaciones, y cuándo vuelve, me dice que esta todo desordenado y es que ella sin querer los mueve y los elimina, yo quisiera que si hay alguna aplicación que no mueva las apps en la pantalla de inicio y no los elimine. O que necesite restringion (contraseña).
¿Hay alguna app queinmovilice las apps de la pantalla de inicio? O como se puede configurar en el móvil?.
Gracias.
|
|
|
214
|
Programación / Desarrollo Web / Re: ¿En cada actualización del móvil se cambia la resolución de pantalla?
|
en: 12 Octubre 2017, 10:50 am
|
Aquí tiene, tengo media querys css y media querys JS <html> <head> <!-- - - - - -TABLET- - - - - --> <style> @media screen and (max-width: 768px){ .flex-caption div img{ width: 350%; left: 41.6%; } *{ box-sizing: border-box; } .gridwrapper a .alexia{ position: relative; height: 13vw; top: 1vw; } .gridwrapper a .moodle{ position: relative; height: 13vw; top: 1vw; } .gridwrapper a .batart{ position: relative; height: 15vw; left: 1vw; top: 1vw; } .gridwrapper a .pillospress{ position: relative; height: 14vw; left: 2vw; top: 1vw; } .gridwrapper a .CUC{ position: relative; height: 15vw; left: 3vw; top: 1vw; } .gridwrapper a .weib{ position: relative; height: 15vw; left: 2.5vw; top: 0.5vw; } .gridwrapper a .bloggeries{ position: relative; height: 15vw; top: -15vw; left: 55vw; } .gridwrapper a .erasmus{ position: relative; height: 15vw; top: 1vw; left:-35vw; } .gridwrapper a .GESTIB2{ position: relative; height: 12vw; top: 1vw; left:43vw; top:-13vw; } .gridwrapper a .mail{ color: skyblue; position: relative; bottom: -15%; font-size: 15vw; left: -37%; } .gridwrapper a .telefono{ color: orange; position: relative; font-size: 15vw; bottom: -15%; left: -17%; } .gridwrapper a .fax1{ color: green; font-size: 15vw; position: relative; top: 14.7%; left: 3%; } .gridwrapper a .equipo{ position: relative; color: blue; font-size: 15vw; bottom: -20%; left: 26%; } .gridwrapper a .descarga{ position: relative; color: red; font-size: 15vw; bottom: -20%; left: 47%; } .gridwrapper .social div a{ color: white; font-size: 4vw; text-align: center; width: 200%; height: 0%; padding: 40% 0% 40% 0%; display: inline-block; text-decoration: none; } } </style> <!-- - - - - - - - - - - - - - --> <!-- - - - - -MÓVIL- - - - - - --> <style> @media screen and (max-width: 600px){ .flex-caption .logos-iescalvia .ies-calvia{ left: 2vw; width: 10vw; display: none; } .flex-caption .logos-iescalvia .Aenor{ left: 2vw; width: 10vw; display: none; } .flex-caption .logos-iescalvia .CERTIFIED-IQNet{ width:10vw; left:2vw; display: none; } .portadam{ width: 130%; } .portadam div{ width: 100%; position: relative; top: all; } .flex-caption div{ width:100%; left:0%; top: 10%; position: absolute; } .flex-caption .logo_page img{ width:100%; } .gridwrapper a .alexia{ position: relative; height: 33vw; top: 1vw; } .gridwrapper a .moodle{ position: relative; height: 30vw; top: 1vw; } .gridwrapper a .batart{ position: relative; height: 30vw; top: 1vw; left: 5%; } .gridwrapper a .pillospress{ top: 2%; height: 30vw; } .gridwrapper a .CUC{ top: 2%; height: 30vw; } .gridwrapper a .weib{ position: relative; height: 25vw; top: 2%; } .gridwrapper a .GESTIB2{ position: relative; height: 16vw; top: -16%; left: 50%; } .gridwrapper a .erasmus{ height: 25vw; top: 3%; position: relative; left: -46%; } .gridwrapper a .bloggeries{ height: 25vw; top: 3%; position: relative; left: 50%; } .gridwrapper a .mail{ color: skyblue; position: relative; bottom: -15%; font-size: 20vw; left: -38%; } .gridwrapper a .telefono{ color: orange; position: relative; font-size: 20vw; bottom: -15%; left: -18%; } .gridwrapper a .fax1{ color: green; font-size: 20vw; position: relative; top: 14.7%; left: 1%; } .gridwrapper a .equipo{ position: relative; color: blue; font-size: 20vw; bottom: -20%; left: 27%; } .gridwrapper a .descarga{ position: relative; color: red; font-size: 25vw; bottom: -20%; left: 46%; } .gridwrapper .social div a{ color: white; font-size: 8vw; text-align: center; width: 200%; height: 0%; padding: 20% 0% 20% 0%; display: inline-block; text-decoration: none; } } </style> <!-- - - - - - - - - - - - - - --> <style> *{ box-sizing: border-box; } </style> <style> body::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,0.6); background-color: rgb(191,191,191); } body::-webkit-scrollbar { width: 12px; background-color: none; border: none; }
body::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6); background-color: orange; }
</style> <script> function cambiarmapa() { cambiarcalles = document.getElementById("mapa_sitio"); cambiarcalles.setAttribute("src","imagenes/mapa_iescalvia_calles.jpg"); cambiarenlace = document.getElementById("url"); cambiarenlace.setAttribute("href","http://ies-calvia.260mb.net/imagenes/mapa_iescalvia_calles.jpg"); cambiarenlace_googlemaps = document.getElementById("url_googlemaps"); cambiarenlace_googlemaps.setAttribute("href","https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,16.39z/data=!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es") } function cambiarsatelite() { cambiar_satelite = document.getElementById("mapa_sitio"); cambiar_satelite.setAttribute("src","imagenes/mapa_iescalvia_satelite.jpg"); cambiar_enlace = document.getElementById("url"); cambiar_enlace.setAttribute("href","http://ies-calvia.260mb.net/imagenes/mapa_iescalvia_satelite.jpg"); cambiarenlace_googlemaps1 = document.getElementById("url_googlemaps"); cambiarenlace_googlemaps1.setAttribute("href","https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,1067m/data=!3m1!1e3!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es"); } </script> <style> .btn1{ background: transparent; cursor: pointer; border: none; } </style> <style type="text/css"> .diseño_franja{ position: relative; height: 60%; width:1366px; bottom: -20%; background-color: white; left: -8px; } </style> <style> .red{ position: fixed; top: 200px; z-index: 100; left: 0; } .social div a{ color: white; font-size: 1.5vw; text-align: center; width: 200%; height: 0%; padding: 30% 0% 30% 0%; display: inline-block; text-decoration: none; } .facebook{ background: #3b5998; border-radius: 0 1rem 0 0; } .youtube{ background: #bb0000; } .googleplus{ background: #dd4b39; } .correo{ background: #666666; } .telf{ background: #FE9A2E; } .mensaje{ background: skyblue; border-radius: 0 0 1rem 0; } .social a:hover{ width: 70px; border-radius: 0 1rem 1rem 0; -webkit-transition: 600ms; -o-transition: 600ms; -ms-transition: 600ms; } .social div a:hover{ width: 320%; } </style> <style> .display{ position: fixed; right: 10px; bottom: -10px; width: 120px; height: 45px; background: rgba(139,139,139,0.9); border-radius: 10px; font-size: 20px; font-family: segoe script; src: url("DS-DIGIT.TTP") format("truetype"); text-align: center; } </style> <style type="text/css"> .diseno_franja{ position: relative; height: 60%; width:1242px; bottom: -20%; background-color: white; left: -8px; } </style> <style> .btn { background: linear-gradient(#F5D0A9,#F7BE81,#FAAC58,#FE9A2E,#FF8000); border: transparent; border-radius: 10px; cursor: pointer; -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transition:all 1s ease-in-out; margin: 5px; } .btn:hover { background: linear-gradient(#A9A9F5,#8181F7,#5858FA,#2E2EFE,#0000FF); } </style> <style> .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} </style> <title>G.T.E</title> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="icon" type="image/ico" href="imagenes/logo_GTE.ico"> <link rel="stylesheet" type="text/css" href="slider13.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="jquery-flexslider.js" type="text/javascript"></script> <script src="jquery-flexslider-min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ if (window.matchMedia("(max-width: 768px)").matches){ $("#header").remove(); logo123 = document.getElementById("logoGTE"); logo123.setAttribute("style","width:60%; top:1vh; left:20%; position:absolute;"); //cambiar portada para tablet y dimensiones portada = document.getElementById("portada1"); portada.setAttribute("src","imagenes/portada_movil.jpg"); dimensionesY = document.getElementById("portada1"); dimensionesY.setAttribute("style", "height:100%;"); //cambiar fondo para tablet fondo12 = document.getElementById("fondo1"); fondo12.setAttribute("style","background-image: url('imagenes/fondo_movil.jpg'); background-repeat:no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; background-color:#F5ECCE;"); //Agrandar el título y cambiar su posición title = document.getElementById("titulo"); title.setAttribute("style","width:83.33%; left:9.5%; position:absolute; top:65%;"); //Agrandar botón de entrada enter = document.getElementById("entry"); enter.setAttribute("style","font-size: 15vw; left: 46%; position: absolute; top: 78%; color: #FFBF00; cursor:pointer;"); //Cambiar medida del footer pie = document.getElementById("footer"); pie.setAttribute("style","height: 110vw;"); //enlace dirección $("#contactos_div").append("<a href='https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,16.39z/data=!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es' target='_blank' style='color: black; text-decoration: none;'><font face='segoe script' color='#666666' style='bottom:3vmin; position: absolute; left:10%; font-size:4vw;' id='address1'>IES Calviá. Avda Son Pillo 1.07180</font></a>"); } if (window.matchMedia("(max-width: 600px)").matches){ //ajustar el fondo de pantalla al móvil fondo12 = document.getElementById("fondo1"); fondo12.setAttribute("style","background-image: url('imagenes/fondo_movil.jpg'); background-repeat:no-repeat; background-position: center center; background-attachment: fixed; background-size: 200%; background-color:#F5ECCE;"); //ajustar la portada al móvil dimensionesY = document.getElementById("portada1"); dimensionesY.setAttribute("style", "height:100%;"); //Cambiar el footer foot = document.getElementById("footer"); foot.setAttribute("style","width:130vw; height:160vh;"); //Modificar el texto "contactos" para móvil contact = document.getElementById("contacts"); contact.setAttribute("style","bottom:105vmin; position: absolute; left:30%; font-size:16vw;"); //Modificarla dirección del instituto para móvil address2 = document.getElementById("address1"); address2.setAttribute("style","bottom:5vmin; position: absolute; left:10%; font-size:9vw;"); } }); </script> <style> * { box-sizing:border-box; } .gridwrapper { overflow:auto; position:relative; height:250px; } .gridwrapper .iescalvia{ width: 10%; } .gridwrapper .aenor{ height: 7vw; position: relative; left: 1%; } .gridwrapper .CERTIFIED_IQNet{ width: 7%; position:relative; left:2.5%; } .gridwrapper .imagen_ubicacion{ width: 16.66%; position: relative; left: 34%; height:7vw; } .gridwrapper .boton_mapa { color: green; font-size: 1.5vw; left: 34.4vw; position: relative; bottom: 2vw; cursor: pointer; } .gridwrapper .boton_satelite{ color: blue; font-size: 2vw; position: relative; left: 32.5vw; bottom: 5vw; cursor: pointer; } .gridwrapper .texto_iescalvia{ position: relative; left: 35vw; bottom: 4vw; font-size: 1.5vw; } .gridwrapper .texto_direccion{ position: relative; left: 76vw; bottom: 4vw; font-size: 1.5vw; } .gridwrapper .alexia{ position: relative; height: 5vw; top: 1vw; } .gridwrapper .moodle{ position: relative; height: 5vw; top: 1vw; } .gridwrapper .batart{ position: relative; height: 5vw; left: 1vw; top: 1vw; } .gridwrapper .pillospress{ position: relative; height: 5vw; left: 2vw; top: 1vw; } .gridwrapper .CUC{ position: relative; height: 5vw; left: 3vw; top: 1vw; } .gridwrapper .weib{ position: relative; height: 5vw; left: 2.5vw; top: 0.5vw; } .gridwrapper .bloggeries{ position: relative; height: 5vw; top: 1vw; } .gridwrapper .erasmus{ position: relative; height: 5vw; top: 1vw; } .gridwrapper .GESTIB2{ position: relative; height: 5vw; top: 1vw; } .gridwrapper .mail{ color: skyblue; position: relative; bottom: 38%; font-size: 3vw; left: 27.7%; } .gridwrapper .telefono{ color: orange; position: relative; font-size: 3vw; bottom: 15%; left: 24.4%; } .gridwrapper .fax1{ color: green; font-size: 3vw; position: relative; top: 10%; left: 21%; } .gridwrapper .equipo{ position: relative; color: blue; font-size: 3vw; bottom: 35%; left: 29%; } .gridwrapper .descarga{ position: relative; color: #FE2E2E; font-size: 3vw; left: 26%; } .gridcontent { width:8.33%; margin:0; border-right:1px solid grey; height:100%; float:left; background-color:#84c754; background-color:#f1f1f1; } </style> </head> <body style="background-image: url("imagenes/stackofmagazines.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: cover;" id="fondo1"> <div style="position:absolute;opacity:1;width:auto;left:0px;right:0px;" class="todo"> <div class="gridcontainer"> <div class="gridwrapper" style="height:160%;" id="header"> <!-- header --> <a href="http://www.iescalvia.com" target="_blank" style="text-decoration: none;"> <img src="imagenes/iescalvia.png" class="iescalvia"> </a> <img src="imagenes/logo_aenor.png" class="aenor"> <img src="imagenes/CERTIFIED_IQNet.png" class="CERTIFIED_IQNet"> <a href="http://g-t-e.260mb.net/imagenes/mapa_iescalvia_calles.jpg" target="_blank" style="cursor: zoom-in; text-decoration: none;" id="url"> <img src="imagenes/mapa_iescalvia_calles.jpg" id="mapa_sitio" class="imagen_ubicacion"> </a> <i class="fa fa-map boton_mapa" onclick="cambiarmapa()" title="Modo mapa"></i> <i class="fa fa-globe boton_satelite" onclick="cambiarsatelite()" title="Modo satelital"></i> <a href="https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,16.39z/data=!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es" target="_blank" id="url_googlemaps" style="color: black; text-decoration: none;"> <font face="segoe script" class="texto_iescalvia">IES Calviá</font> <br> <font face="segoe script" class="texto_direccion">Avda Son Pillo 1. 07180</font> </a> </div> <div class="gridwrapper portadam" style="height:100%;" id="body"> <!-- Contenido --> <div class="flexslider"> <ul class="slides"> <li> <img src="imagenes/bg-slider-pizarra.jpg" alt="" id="portada1" style=""> <section class="flex-caption" id="contenido_portada"> <div class="logo_page"> <img src="imagenes/logo_GTE.png" id="logoGTE" style=""> </div> <div id="logos_iescalvia" class="logos-iescalvia"></div> <img src="imagenes/titulo6.png" style="width:33.33%; left:33.3%; position:absolute; top:65%;" id="titulo"> <i class="fa fa-sign-in" style="font-size: 3.5vw; left: 49%; position: absolute; top: 76%; color: #FFBF00; cursor:pointer;" onclick="location.href='GTE/'" title="entrar" id="entry"></i> </section> </li> </ul> </div> </div> <div class="gridwrapper" style="height:15vw;" id="footer"> <!-- footer --> <a href="https://web2.alexiaedu.com/ACWeb/LogOn.aspx?key=WRcKBnV4m3M%3d" target="_blank" style="text-decoration: none;"><img src="imagenes/Alexia1.png" class="alexia" title="Alexia"></a> <a href="http://moodle2.iescalvia.com/" target="_blank" style="text-decoration: none;"><img src="imagenes/moodle.png" class="moodle" title="Moodle"></a> <a href="https://www.bachilleratoartistico-iescalvia.com/" target="_blank" style="text-decoration: none;"><img src="imagenes/batart.png" class="batart" title="Bachillerato artístico"></a> <a href="http://iescalviablog.blogspot.com.es/" target="_blank" style="text-decoration: none;"><img src="imagenes/pillospress.png" class="pillospress" title="pillo's press"></a> <a href="http://www.cucalvia.com/" target="_blank" style="text-decoration: none;"><img src="imagenes/CUC.png" class="CUC" title="CUC"></a> <a href="http://weib.caib.es/" target="_blank" style="text-decoration: none;"><img src="imagenes/weib.png" class="weib" title="weib"></a> <br> <a href="http://iescalvia.blogspot.com.es/" target="_blank" style="text-decoration: none;"><img src="imagenes/bloggeries.png" class="bloggeries" title="Información del IES Calviá"></a> <a href="http://www.erasmusplus.gob.es/" target="_blank" style="text-decoration: none;"><img src="imagenes/erasmus.png" class="erasmus" title="Erasmus"></a> <a href="https://www3.caib.es/xestib/xestib/menu/iniciGestio" target="_blank" style="text-decoration: none;"><img src="imagenes/GESTIB2.0.jpg" class="GESTIB2" title="GESTIB 2.0"></a> <a href="mailto:iescalvia@gmail.com"><i class="fa fa-envelope mail" title="iescalvia@gmail.com"></i></a> <a href="tel:+34 971690229"><i class="fa fa-tty telefono" title="+34 971690229"></i></a> <a href="fax:+24 971694931"><i class="fa fa-fax fax1" title="+34 971694931"></i></a> <a href="https://sites.google.com/site/iescalvia/organitzacio/equip" target="_blank" style="text-decoration: none;" title="¿Quienes somos?"><i class="fa fa-users equipo" id="equipo18"></i></a> <a href="guia.pdf" download="guia.pdf"><i class="fa fa-file-pdf-o descarga"></i></a> <div class="red"> <div class="social"> <div><a href="https://www.facebook.com/ies.calvia" target="_blank" class="fa fa-facebook-square facebook"></a></div> <div><a href="https://www.youtube.com/user/iescalviablog" target="_blank" class="fa fa-youtube-play youtube"></a></div> <div><a href="https://plus.google.com/114947718295379948989" target="_blank" class="fa fa-google-plus googleplus"></a></div> <div><a href="mailto:iescalvia@gmail.com" class="fa fa-envelope correo" title="iescalvia@gmail.com"></a></div> <div><a href="tel:+34971690229" class="fa fa-volume-control-phone telf" title="+34 971690229"></a></div> <div><a href="fax:+34971694931" class="fa fa-fax mensaje" title="+34 971694931"></a></div> </div> </div> </div> <!-- Contactos --> <div id="contactos_div"></div> </div> </div> </body> </html>
|
|
|
217
|
Programación / Desarrollo Web / Como hacer un transform al mover el mouse fuera del elem. con un selector css3
|
en: 8 Octubre 2017, 00:08 am
|
Hola hice una transición que al estar encima de un logo (:hover), me aparezca un elemento desplazandose de izquierda al centro y lo que querria saber si es que hay algun selector css3 (:hover,:before,:link,etc.) que al dejar de tener el mouse encima del elemento me haga otra transicion . .ctl00_ContenidoPagina_ctl06_spnTooltip{ width: auto; height: auto; line-height: 100%; padding: 5px; border: 4px solid #FACC2E; border-radius: 5px; box-shadow: 1px 1px 2px #A8A8A8; background-color: #F5DA81; font-family: MV Boli; font-size: 1.3vw; max-width: 50%; text-align: left; z-index: 999; position: absolute; left: -50%; opacity: 0; display: block; bottom: 11vw; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -webkit-animation-name:final; -webkit-animation-duration:2s; -webkit-animation-delay:5s; animation-name: final; animation-duration: 1s; animation-delay: 5s; } i:hover + .ctl00_ContenidoPagina_ctl06_spnTooltip{ width: auto; height: auto; line-height: 100%; padding: 5px; border: 4px solid #FACC2E; border-radius: 5px; box-shadow: 1px 1px 2px #A8A8A8; background-color: #F5DA81; font-family: MV Boli; font-size: 1.3vw; max-width: 50%; text-align: left; z-index: 999; position: absolute; left: -50%; opacity: 1; display: block; bottom: 11vw; transform: translate(150%); -webkit-transform: translate(150%); }
<i class="fa fa-question-circle" style="font-size: 2vw; color: blue; cursor: help; left:73vw;position:absolute;bottom:8vw;" id="infromacion1"></i> <div class="ctl00_ContenidoPagina_ctl06_spnTooltip"> <font color="#FA5858"><big>Solo para administradores:</big></font> Para añadir un enlace en la tabla, tiene que ir a su curso y grupo. </div>
P.D: O meter otro valor en el transform que sea el segundo. Gracias.
|
|
|
219
|
Programación / Desarrollo Web / Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS
|
en: 1 Octubre 2017, 01:12 am
|
Hoa, tengo un icono fa y un div, lo que me gustaría hacer en que cuando pase por el icono fa me aparezca el div, todo con css, se que es con hover pero no se muy bien como hacerlo, hay algún tutorial? O algun ejemplo. <!DOCTYPE html> <html> <head> <style> .pop-up .ctl00_ContenidoPagina_ctl06_spnTooltip{ width: auto; height: auto; line-height: 100%; padding: 5px; border: 4px solid #FACC2E; border-radius: 5px; box-shadow: 1px 1px 2px #A8A8A8; background-color: #F5DA81; font-family: MV Boli; font-size: 1.3vw; max-width: 50%; text-align: left; z-index: 0; position: absolute; left: 25%; opacity: 0; } button:hover .pop-up .ctl00_ContenidoPagina_ctl06_spnTooltip{ opacity:1; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <center class="pop-up"> <div class="ctl00_ContenidoPagina_ctl06_spnTooltip"> <font color="#FA5858"><big>Solo para administradores:</big></font> Para añadir un enlace en la tabla, tiene que ir a su curso y grupo. </div> </center> <button style="background:none; border-radius:10; top:50px; position:absolute;">i</button> </body> </html>
Y no me funciona, porque será? Gracias
|
|
|
|
|
|
|