Question

我有一个带幻灯片和社交分享图标的网站。当您滚动到页面底部并单击社交分享按钮正上方的滑动框时（当这两个按钮相互跟随时发生），幻灯片面板上会出现一个白色图层1，滚动后会消失。这只发生在chrome和opera上。 website和full css code 。这样做的具体代码如下。

.socialPlugin .socials .fa {
    height: 2.5em;
    font-size: 2em;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: 2.5em;
    -webkit-backface-visibility: hidden;
}

.socialPlugin .socials .fa:before, .socialPlugin .socials .fa:after {
    left: 0;
    position: absolute;
    text-align: center;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    top: 50%;
    width: 100%;
}

Answer 1

似乎更换

.cd-fixed-bg.cd-bg-1{   
    background-image: url("../img/slideover/cd-background-2.jpg");
}

的

.cd-fixed-bg.cd-bg-1{   
    background: url("../img/slideover/cd-background-2.jpg");
}

解决了这个问题。

Answer 2

尝试处理＆＃34; slideover1＆＃34;就像你正在做的那样＆＃34;滑过＆＃34;它已经存在的地方，你将它从隐藏变为可见。

我相信你的问题可能是因为＆＃34; slideover1＆＃34;仅在您第一次按下按钮后才发生，不允许它在加载时呈现。

这是我的偷偷摸摸的怀疑，仍然在弄乱代码以查看任何其他潜在问题。

＆＃13;

<div class="slide-over open" style="right: 0px;"><a href="#" data-slideover="close" class="close-x"><span class="icon-cross"></span></a>
  <div id="slideover1" class="slideover-content">
	    <div class="cd-main-content">
			<div class="cd-fixed-bg cd-bg-1">
				<h1>Chill Out Mondays</h1>
			</div>
			<div class="cd-scrolling-bg cd-color-2">
				<div class="cd-container">
					<p>You really don't have to know how to dance, just stand there. Move your head to the beat. Not bad, okay now a 1, 2 step with your feet. Whoa! Talk about a natural. Lingala, perfect way to let your body do the talking. Every Monday. Good music, Beautiful people.</p>
				</div>
			</div>
			<div class="cd-fixed-bg cd-bg-2">
				<h2>Happy Hour  Mondays</h2>
			</div> 
			<div class="cd-scrolling-bg cd-color-3">
				<div class="cd-container">
					<p>Bet  you woke up today like, damn, another Monday. No worries, how was work today? Don't wanna talk bout it? Ok. So what do you have planned for tonight then? Yup guessed it, huna plot. Again no worries, you need to rest, no chill. Lounge at Latitude and have yourself an easy Monday.</p>
				</div> 
			</div> 
			<div class="cd-fixed-bg cd-bg-3">
				<h2>Mindful Mondays Twist</h2>
			</div> 
			<div class="cd-scrolling-bg cd-color-1">
				<div class="cd-container">
					<p>As we wind up the day, you suddenly think to yourself, today was either pretty average or pretty stressful. Don't know about you but I like constant happy vibes to take all the stress outta my day. A couple of close friends mixed with a couple of drinks and welcome to a chilled out Monday.</p>
				</div> 
			</div> 
			<div class="cd-fixed-bg cd-bg-4">
				<h2>Rhumba &amp; Lingala</h2>
			</div> 
		</div> 
    </div></div>

＆＃13;

Answer 3

刚试过这个，这是你的修复。

.slide-over.open .cd-fixed-bg{
    opacity:0;
}

.slide-over.open[style="right: 0px;"] .cd-fixed-bg{
    opacity:1;
}

当面板达到0px时专门定位。

CSS白色层干扰

3 个答案: