【发布时间】：2018-12-24 02:17:11
【问题描述】：
所以悬停动画会导致我的网站水平滚动。如何在保持相同悬停动画效果的同时解决此问题？
如果我删除悬停动画，网站将无法水平滚动。悬停动画基本上在悬停在一个文本上后显示另一个文本。它降低了原始文本的不透明度，同时从右侧引入第二个文本。
悬停动画css：
.project-title-right span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.project-title-right:before,
.project-title-right:after {
color: #B52830;
content: '';
position: absolute;
text-align: center;
opacity: 0;
-webkit-transition: .4s, opacity .6s;
-moz-transition: .4s, opacity .6s;
-o-transition: .4s, opacity .6s;
transition: .4s, opacity .6s;
}
.project-title-right:before {
content: attr(data-hover);
-webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
-o-transform: translate(150%, 0);
transform: translate(150%, 0);
}
.project-title-right:after {
content: attr(data-active);
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
}
.project-title-right:hover span,
.project-title-right:active span {
opacity: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
.project-title-right:hover:before,
.project-tile:active:after {
opacity: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}
.project-title-right:active:before {
-webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
-o-transform: translate(150%, 0);
transform: translate(150%, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
悬停实现：
<h2 class="project-title-right" data-hover="Interactive Site" data-aos="fade-left" data-aos-duration="700" data-aos-offset="150"><span>Evolution of Computer Science</span></h2>
.device-container {
position: relative;
height: 60vh;
width: 100%;
}
.flex {
display: flex;
display: -ms-flexbox;
}
.center-y {
-ms-flex-align: center;
align-items: center;
}
.square-left {
position: absolute;
top: 0;
right: 0;
margin-right: 30px;
min-height: 100%;
width: calc(100% + 200px);
background-size: contain;
background-color: #3e82ef;
background-repeat: no-repeat;
}
.width-l {
max-width: 800px;
}
.container {
position: relative;
margin: 0 auto;
width: 87.5vw;
}
.padding-l {
padding-top: 120px;
padding-bottom: 120px;
}
.grid-2 {
display: -ms-grid;
display: grid;
grid-gap: 20px;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr
}
/*Hover Animation*/
.project-title-right span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.project-title-right:before,
.project-title-right:after {
color: #B52830;
content: '';
position: absolute;
text-align: center;
opacity: 0;
-webkit-transition: .4s, opacity .6s;
-moz-transition: .4s, opacity .6s;
-o-transition: .4s, opacity .6s;
transition: .4s, opacity .6s;
}
.project-title-right:before {
content: attr(data-hover);
-webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
-o-transform: translate(150%, 0);
transform: translate(150%, 0);
}
.project-title-right:after {
content: attr(data-active);
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
}
.project-title-right:hover span,
.project-title-right:active span {
opacity: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
.project-title-right:hover:before,
.project-tile:active:after {
opacity: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}
.project-title-right:active:before {
-webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
-o-transform: translate(150%, 0);
transform: translate(150%, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}<div class="container grid-2 padding-l">
<div>
<div class="device-container">
<div class="square-left"></div>
</div>
</div>
<div class="flex center-y">
<div class="width-l">
<h2 class="project-title-right" data-hover="Interactive Site" data-aos="fade-left" data-aos-duration="700" data-aos-offset="150"><span>Evolution of Computer Science</span></h2>
<p class="blocksize color-light">Lorem ipsum dolor sit amet, vel ei dico oratio malorum. Id pri agam oratio. Partem labores ullamcorper est no. At vivendum facilisis conceptam vis, iusto accumsan erroribus pri id. Id eum nominati liberavisse, dolorum persecuti ea
his, pri et everti definitionem.</p>
<a class="cta color-deepblue" href="about">Learn more ›</a>
</div>
</div>
</div>【问题讨论】：
-
这里没有足够的代码来弄清楚发生了什么。猜测一下，我会说在正文中添加
overflow-x: hidden -
这是进入悬停动画的唯一代码。删除这部分代码将解决这种情况。但是，我仍然想要悬停动画。在 body 中添加 overflow-x: hidden 只会移除滚动，不会阻止用户水平滚动。
-
请在minimal, complete, and verifiable example 中包含您正在使用的 HTML 和 CSS。您可以使用Stack Snippets 功能来帮助您。
-
@DanielSixl 我刚刚在我的问题中添加了一个 sn-p。你能看看吗？非常感谢！
-
不错。现在我们有了一个可以使用的上下文。