Avatar for Username

Поиск в Поддержке

Избегайте мошенников, выдающих себя за службу поддержки. Мы никогда не попросим вас позвонить, отправить текстовое сообщение или поделиться личной информацией. Сообщайте о подозрительной активности, используя функцию «Пожаловаться».

Learn More

Эта тема была архивирована. Если вам нужна помощь, задайте новый вопрос.

css popup

tellfranky
tellfranky
more options

this is working in IE, Chrome, and somehow in OPera, but not in Firefox, any idea why?? <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="normalize28.4.23.css"> <style> .main-div { position:relative; width:100%; max-width:1000px; height:100%; max-height:800px; background:lightblue url('Hotel.jpg') no-repeat center/cover; } .i-box { position:absolute; width:100px; height:100px; background-color:orange; bottom:1%; right:1%; z-index:1; text-align:center; font:bold 6em times, serif; line-height:50px; } .i-box span { font-weight:600; } .info-layers { position:absolute; width:80%; height:80%; bottom:10%; left:10%; display:none; } .info-layers > div:first-child { opacity:0.5; background-color:white; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100%; width:100%; z-index:87; } /*=================================== ** info text **=================================== */ .info-layers > div:nth-child(2) { opacity:1.0; color:#FFFFFF; font-weight:bold; font-size:1.5em; letter-spacing:.08em; background-color:#222222; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:2em 3em 2em; max-width:70%; z-index:90; } .i-box:hover { display:none;} .i-box:hover ~ .main-div:not(:hover) { opacity:0.5; } .i-box:hover + .info-layers { display:block; } .i-box:hover + .info-layers > div:first-child { opacity:0.5; width:80%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:87; background-color:white; margin:0; padding:0; } </style>

i
 
fooobar-bazzz qux fooobar and bazzz

this is working in IE, Chrome, and somehow in OPera, but not in Firefox, any idea why?? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="normalize28.4.23.css" /> <style> .main-div { position:relative; width:100%; max-width:1000px; height:100%; max-height:800px; background:lightblue url('Hotel.jpg') no-repeat center/cover; } .i-box { position:absolute; width:100px; height:100px; background-color:orange; bottom:1%; right:1%; z-index:1; text-align:center; font:bold 6em times, serif; line-height:50px; } .i-box span { font-weight:600; } .info-layers { position:absolute; width:80%; height:80%; bottom:10%; left:10%; display:none; } .info-layers > div:first-child { opacity:0.5; background-color:white; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100%; width:100%; z-index:87; } /*=================================== ** info text **=================================== */ .info-layers > div:nth-child(2) { opacity:1.0; color:#FFFFFF; font-weight:bold; font-size:1.5em; letter-spacing:.08em; background-color:#222222; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:2em 3em 2em; max-width:70%; z-index:90; } .i-box:hover { display:none;} .i-box:hover ~ .main-div:not(:hover) { opacity:0.5; } .i-box:hover + .info-layers { display:block; } .i-box:hover + .info-layers > div:first-child { opacity:0.5; width:80%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:87; background-color:white; margin:0; padding:0; } </style> </head> <body> <div class="main-div"> <div class="i-box"><span><strong><b>i</b></strong></span></div> <div class="info-layers"> <div>&nbsp;</div> <div>fooobar-bazzz qux fooobar and bazzz </div> </div> </div><!-- end main-div--> </div> </body>

Все ответы (1)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
more options

Do have a page online demonstrating the problem? If your site is not up yet, you can use Jsfiddle, Codepen, etc.

When sharing a link to a non-Mozilla site, to avoid a delay caused by the spam link moderation feature, break the URL by inserting a space or two before the TLD. For example:

https://www.example .com/dir/page