hover效果优化

master
Lee 2022-10-10 14:46:18 +08:00
parent 5e0d051636
commit 0f5806d5d9
2 changed files with 465 additions and 386 deletions

View File

@ -327,10 +327,6 @@
transition: all .6s;
}
.news-service .new-list>.swiper .swiper-slide:hover .info {
color: rgba(14, 53, 127, .68);
}
/* 指示点 */
.new-list .swiper-pagination-bullet {
width: 12px;
@ -392,16 +388,6 @@
transition: all .6s;
}
.index-service .left-service:hover em {
background-color: #fe8917;
border: 1px solid #fe8917;
opacity: 1;
}
.index-service .left-service:hover>img {
transform: scale(1.1);
}
.index-service .right-service {
flex-wrap: wrap;
width: 55.5%;
@ -415,10 +401,6 @@
transition: all .6s;
}
.index-service .right-service>a:hover {
transform: scale(1.05);
}
.index-service .left-service p,
.index-service .right-service>a>p {
max-width: 180px;
@ -480,12 +462,6 @@
transition: all .6s;
}
.project-case-title .more:hover {
background-color: #fe8917;
color: #ffffff;
border: 1px solid #fe8917;
}
.project-case .list {
flex-wrap: wrap;
}
@ -511,10 +487,6 @@
transition: all .6s;
}
.project-case-list>a:hover img {
transform: scale(1.1);
}
.project-case-list>a .txt {
justify-content: space-between;
align-items: center;
@ -524,11 +496,6 @@
transition: all .6s;
}
.project-case-list>a:hover .txt {
background-color: #0e357f;
color: #ffffff;
}
.project-case-list>a>.txt p {
width: calc(100% - 20px);
}
@ -754,14 +721,6 @@
transition: all .6s;
}
.management-team-item>a:hover .img>img {
transform: scale(1.1);
}
.management-team-item>a:hover .txt>p {
color: rgba(14, 53, 127, .68);
}
/* 企业文化 */
.company-culture {
align-items: flex-start;
@ -795,10 +754,6 @@
transition: all .6s;
}
.company-culture .scale-img:hover>img {
transform: scale(1.1);
}
.enterprise-list {
flex-wrap: wrap;
}
@ -858,10 +813,6 @@
transition: all .6s;
}
.enterprise-list .item:hover img {
transform: scale(1.1);
}
/* 大事记 */
.history {
justify-content: space-between;
@ -933,10 +884,6 @@
border-radius: 100%;
}
.history-swiper .swiper-slide:hover .history-time>p {
background-color: #fe8917;
}
.history-txt {
width: calc(100% - 160px);
padding: 16px 0 28px 30px;
@ -1178,14 +1125,6 @@
text-align: justify;
}
.activities-list .activities-item:hover .img>img {
transform: scale(1.1);
}
.activities-list .activities-item:hover .txt>h2 {
color: #0e357f;
}
/* 更多按钮 */
.article-more-btn {
display: flex;
@ -1214,12 +1153,6 @@
cursor: pointer;
}
.load-more:hover {
background-color: #fe8917;
border: 1px solid #fe8917;
color: #ffffff;
}
/* 活动预告 */
.preview-swiper {
width: 100%;
@ -1267,14 +1200,6 @@
text-align: justify;
}
.preview-swiper .swiper-slide-active:hover .img>img {
transform: scale(1.1);
}
.preview-swiper .swiper-slide-active:hover .txt h2 {
color: rgba(14, 53, 127, 1);
}
.preview-item .txt .article-more-btn {
justify-content: flex-start;
}
@ -1635,17 +1560,6 @@
transition: all .6s;
}
.news-item:hover .article-more-btn,
.news-first:hover .article-more-btn {
filter: grayscale(0);
opacity: 1;
}
.news-item:hover .img>img,
.news-first:hover .img>img {
transform: scale(1.1);
}
.load-more-news {
display: flex;
justify-content: center;
@ -1657,11 +1571,6 @@
transition: all .6s;
}
.load-more-news:hover {
color: #fe8917;
cursor: pointer;
}
/* 新闻详情 */
.news-detail-bg {
justify-content: space-between;
@ -1779,10 +1688,6 @@
transition: all .6s;
}
.services-list .item:hover .img>img {
transform: scale(1.1);
}
.services-list .item .txt {
position: absolute;
left: 90px;
@ -1915,18 +1820,6 @@
transition: all .6s;
}
.market-item:hover img {
transform: scale(1.1);
}
.market-item:hover h2 {
color: #09357f;
}
.market-item:hover p {
color: rgba(14, 53, 127, .6);
}
/* 活动展示 */
.market-banner-swiper .swiper-slide,
.market-swiper .swiper-slide {
@ -2125,18 +2018,6 @@
transition: all .6s;
}
.red-property-case>a:hover .txt {
background: none;
}
.red-property-case>a:hover .info {
background-color: #09357f;
}
.red-property-case>a:hover .info>p {
color: #ffffff;
}
/* 红色物业详情 */
.red-property-info {
margin-top: 0;
@ -2242,22 +2123,6 @@
transition: all .6s;
}
.recruit-item:hover {
background-color: #f2f5fb;
}
.recruit-item:hover h2 {
color: #0e357f;
}
.recruit-item:hover .img {
background-color: #0e357f;
}
.recruit-item:hover .img>img {
filter: grayscale(100%) brightness(100);
}
/* 招聘详情 */
.min-heigh-box {
min-height: calc(100vh - 413px);
@ -2294,10 +2159,12 @@
.recruit-detail .left>div p:last-child {
margin-right: 0;
}
.recruit-detail .left>div p img {
width: 100%;
border: 1px solid #f6f6f6;
}
.recruit-detail .left>div p>span {
display: block;
text-align: center;
@ -2321,6 +2188,7 @@
.business-cooperation {
position: relative;
}
.business-cooperation>img {
width: 100%;
height: 100%;
@ -2453,154 +2321,6 @@
max-width: 100%;
}
@media screen and (max-width:1840px) {
.nav>.pull-call{
display: none;
}
}
@media screen and (max-width:1520px) {
.w1360{
width: 90% !important;
}
}
@media screen and (max-width:1360px){
.preview-swiper .swiper-slide{
width: 84%;
margin: 0 15px;
}
.preview-swiper .swiper-button-prev{
left: 2.5%;
}
.preview-swiper .swiper-button-next{
right: 2.5%;
}
.services-list .item{
height: 420px;
}
}
@media screen and (max-width:1280px) {
.nav>a{
margin-left: 30px;
}
.sub-nav>a{
margin-left: 35px;
}
.foot-left .item{
margin-left: 60px;
}
.banner-txt .title{
font-size: 50px;
}
.banner-txt .sub-title{
font-size: 28px;
}
.project-case-list>a>.img{
height: 175px;
}
.culture-info{
line-height: 1.8;
}
.red-property-case>a>.img{
height: 235px;
}
.complaint .left{
width: 280px;
}
.complaint .right{
width: calc(100% - 320px);
}
.services-list .item{
height: 390px;
}
.activities-list .activities-item>.txt{
padding: 20px;
}
.activities-list .activities-item{
height: 200px;
}
.news-first .info{
min-height: 124px;
}
.news-item .img{
height: 210px;
}
.news-item .time-bg{
height: 210px;
}
}
@media screen and (max-width:1220px) {
.foot{
position: relative;
padding-bottom: 50px;
}
.record-info{
display: flex;
justify-content: center;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
}
.banner-txt .title{
font-size: 46px;
}
.banner-txt .sub-title{
font-size: 26px;
}
.index-service .left-service p, .index-service .right-service>a>p{
font-size: 18px;
}
.index-service .left-service span, .index-service .right-service>a>span{
font-size: 16px;
}
.project-case-list>a>.img{
height: 165px;
}
.red-property-case>a>.img{
height: 220px;
}
.enterprise-list .item .txt{
padding: 15px;
}
.activities-list .activities-item>.txt{
padding: 15px;
}
.activities-list .activities-item{
height: 190px;
}
.news-first .info{
min-height: 120px;
}
.news-item .img{
height: 200px;
}
.news-item .time-bg{
height: 200px;
}
}
@media screen and (max-width:1100px) {
.banner-txt .title{
font-size: 42px;
}
.banner-txt .sub-title{
font-size: 24px;
}
.index-service .left-service p, .index-service .right-service>a>p{
font-size: 17px;
}
.index-service .left-service span, .index-service .right-service>a>span{
font-size: 15px;
}
}
/* 非手机端隐藏 */
@media screen and (min-width:960px) {
@ -2613,6 +2333,326 @@
.wap-img {
display: none !important;
}
/* 鼠标移入效果 */
.news-service .new-list>.swiper .swiper-slide:hover .info {
color: rgba(14, 53, 127, .68);
}
.index-service .left-service:hover em {
background-color: #fe8917;
border: 1px solid #fe8917;
opacity: 1;
}
.index-service .left-service:hover>img {
transform: scale(1.1);
}
.index-service .right-service>a:hover {
transform: scale(1.05);
}
.project-case-title .more:hover {
background-color: #fe8917;
color: #ffffff;
border: 1px solid #fe8917;
}
.project-case-list>a:hover img {
transform: scale(1.1);
}
.project-case-list>a:hover .txt {
background-color: #0e357f;
color: #ffffff;
}
.management-team-item>a:hover .img>img {
transform: scale(1.1);
}
.management-team-item>a:hover .txt>p {
color: rgba(14, 53, 127, .68);
}
.company-culture .scale-img:hover>img {
transform: scale(1.1);
}
.enterprise-list .item:hover img {
transform: scale(1.1);
}
.history-swiper .swiper-slide:hover .history-time>p {
background-color: #fe8917;
}
.activities-list .activities-item:hover .img>img {
transform: scale(1.1);
}
.activities-list .activities-item:hover .txt>h2 {
color: #0e357f;
}
.load-more:hover {
background-color: #fe8917;
border: 1px solid #fe8917;
color: #ffffff;
}
.preview-swiper .swiper-slide-active:hover .img>img {
transform: scale(1.1);
}
.preview-swiper .swiper-slide-active:hover .txt h2 {
color: rgba(14, 53, 127, 1);
}
.news-item:hover .article-more-btn,
.news-first:hover .article-more-btn {
filter: grayscale(0);
opacity: 1;
}
.news-item:hover .img>img,
.news-first:hover .img>img {
transform: scale(1.1);
}
.load-more-news:hover {
color: #fe8917;
cursor: pointer;
}
.services-list .item:hover .img>img {
transform: scale(1.1);
}
.market-item:hover img {
transform: scale(1.1);
}
.market-item:hover h2 {
color: #09357f;
}
.market-item:hover p {
color: rgba(14, 53, 127, .6);
}
.red-property-case>a:hover .txt {
background: none;
}
.red-property-case>a:hover .info {
background-color: #09357f;
}
.red-property-case>a:hover .info>p {
color: #ffffff;
}
.recruit-item:hover {
background-color: #f2f5fb;
}
.recruit-item:hover h2 {
color: #0e357f;
}
.recruit-item:hover .img {
background-color: #0e357f;
}
.recruit-item:hover .img>img {
filter: grayscale(100%) brightness(100);
}
}
@media screen and (max-width:1840px) {
.nav>.pull-call {
display: none;
}
}
@media screen and (max-width:1520px) {
.w1360 {
width: 90% !important;
}
}
@media screen and (max-width:1360px) {
.preview-swiper .swiper-slide {
width: 84%;
margin: 0 15px;
}
.preview-swiper .swiper-button-prev {
left: 2.5%;
}
.preview-swiper .swiper-button-next {
right: 2.5%;
}
.services-list .item {
height: 420px;
}
}
@media screen and (max-width:1280px) {
.nav>a {
margin-left: 30px;
}
.sub-nav>a {
margin-left: 35px;
}
.foot-left .item {
margin-left: 60px;
}
.banner-txt .title {
font-size: 50px;
}
.banner-txt .sub-title {
font-size: 28px;
}
.project-case-list>a>.img {
height: 175px;
}
.culture-info {
line-height: 1.8;
}
.red-property-case>a>.img {
height: 235px;
}
.complaint .left {
width: 280px;
}
.complaint .right {
width: calc(100% - 320px);
}
.services-list .item {
height: 390px;
}
.activities-list .activities-item>.txt {
padding: 20px;
}
.activities-list .activities-item {
height: 200px;
}
.news-first .info {
min-height: 124px;
}
.news-item .img {
height: 210px;
}
.news-item .time-bg {
height: 210px;
}
}
@media screen and (max-width:1220px) {
.foot {
position: relative;
padding-bottom: 50px;
}
.record-info {
display: flex;
justify-content: center;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
}
.banner-txt .title {
font-size: 46px;
}
.banner-txt .sub-title {
font-size: 26px;
}
.index-service .left-service p,
.index-service .right-service>a>p {
font-size: 18px;
}
.index-service .left-service span,
.index-service .right-service>a>span {
font-size: 16px;
}
.project-case-list>a>.img {
height: 165px;
}
.red-property-case>a>.img {
height: 220px;
}
.enterprise-list .item .txt {
padding: 15px;
}
.activities-list .activities-item>.txt {
padding: 15px;
}
.activities-list .activities-item {
height: 190px;
}
.news-first .info {
min-height: 120px;
}
.news-item .img {
height: 200px;
}
.news-item .time-bg {
height: 200px;
}
}
@media screen and (max-width:1100px) {
.banner-txt .title {
font-size: 42px;
}
.banner-txt .sub-title {
font-size: 24px;
}
.index-service .left-service p,
.index-service .right-service>a>p {
font-size: 17px;
}
.index-service .left-service span,
.index-service .right-service>a>span {
font-size: 15px;
}
}
/* 手机端样式 */
@ -4186,13 +4226,16 @@
.join-us {
padding-bottom: .4rem;
}
.join-us .img {
width: 4.3rem;
margin: .3rem auto 0;
}
.join-us .img>p {
width: 2rem;
}
.join-us .img>p span {
display: block;
font-size: .24rem;
@ -4205,10 +4248,12 @@
background-image: url(../images/public/about-bg-01.jpg);
background-color: #f5f5f5 !important;
}
.recruit-list {
margin-top: 0 !important;
padding-bottom: 0;
}
.recruit-item {
width: 100%;
margin-right: 0 !important;
@ -4216,25 +4261,31 @@
margin-bottom: .28rem;
padding: .25rem .3rem;
}
.recruit-item .txt {
width: calc(100% - 1rem);
}
.recruit-item .txt>h2 {
font-size: .3rem;
}
.recruit-item .txt>ins {
width: .48rem;
height: .04rem;
margin: .13rem 0;
}
.recruit-item .txt>p {
font-size: .24rem;
}
.recruit-item .img {
width: .95rem;
height: .95rem;
background-color: #f5f5f5 !important;
}
.recruit-item .img>img {
width: .38rem;
}
@ -4244,27 +4295,33 @@
background-image: url(../images/public/about-bg-01.jpg);
background-color: #f5f5f5 !important;
}
.recruit-detail {
width: 100% !important;
flex-direction: column;
padding-bottom: 0;
}
.recruit-detail .left {
width: 100%;
padding: .3rem 3%;
background-color: #FFFFFF;
}
.recruit-detail .left>h1 {
font-size: .32rem;
margin-bottom: .12rem;
}
.recruit-detail .left>p {
font-size: .24rem;
line-height: 1.6;
}
.recruit-detail .left>div {
margin-top: .2rem;
}
.recruit-detail .left>div p {
width: 1.5rem;
margin-right: .3rem;
@ -4292,23 +4349,29 @@
.business-cooperation {
height: 3.8rem;
}
.business-cooperation .title-txt {
left: .4rem;
}
.cooperation-title>p {
font-size: .36rem;
}
.cooperation-title>strong {
font-size: .28rem;
font-weight: bold;
}
.business-cooperation .title-txt>ins {
width: .7rem;
margin-bottom: .38rem;
}
.business-cooperation .title-txt>.img span {
width: 1.1rem;
}
.business-cooperation .title-txt>.img em {
font-size: .24rem;
margin-top: .12rem;
@ -4318,19 +4381,24 @@
flex-direction: column;
padding: .32rem 0 0;
}
.business-map .txt {
width: 100%;
}
.business-map .txt>h2 {
font-size: .28rem;
}
.business-map .txt>span {
font-size: .24rem;
}
.business-map .txt>div {
font-size: .24rem;
line-height: 1.8;
}
.business-map .map {
width: 100%;
height: 3.8rem;
@ -4341,45 +4409,56 @@
.min-heigh-box {
min-height: auto;
}
.complaint {
flex-direction: column;
width: 100% !important;
padding-bottom: 0;
margin-top: -.4rem !important;
}
.complaint .left {
width: 100%;
padding: .6rem 3% .4rem;
background-color: #ffffff;
}
.complaint-logo {
padding-bottom: .4rem;
}
.complaint-logo img {
width: 1.72rem;
}
.complaint-phone {
padding-top: .3rem;
}
.complaint-phone span {
font-size: .24rem;
}
.complaint-phone strong {
font-size: .36rem;
}
.complaint-phone>img {
height: 1.06rem;
margin-right: .12rem;
}
.complaint .right {
width: 94%;
margin: .3rem auto 0 !important;
padding: .25rem .3rem;
background-color: #ffffff;
}
.complaint-title {
font-size: .3rem;
}
.complaint .right .rich-txt {
font-size: .24rem;
line-height: 1.6;

View File

@ -4,7 +4,7 @@ $(function(){
$('.header').addClass('header-white');
}else{
$(window).scroll(function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 10){
$('.header').addClass('header-white');
} else {