悬停动画可使网站水平滚动

时间：2018-12-23 15:38:15

标签： html css animation hover

因此，悬停动画使我的网站水平滚动。如何解决此问题，同时又保持相同的悬停动画效果？

如果删除悬停动画，则无法水平滚动网站。悬停动画基本上将鼠标悬停在另一文本之后。它减少了原始文本的不透明度，同时从右侧引入了第二个文本。

悬停动画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>

1 个答案:

答案 0 :(得分：2)

这是您的伪元素：

.project-title-right:before {
    content: attr(data-hover);
    transform: translate(150%, 0);
}

使用转换translate(150%, 0)会占用更多空间。您将需要控制父元素的溢出行为。您可以在容器中添加一个overflow: hidden;。

.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;
    overflow: hidden; /* added as an example */
}

.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>

相关问题
最新问题