0

Olá!

Estou fazendo um efeito de hover no meu projeto (Atribuindo um estilo CSS a um elemento específico dentro de uma div), em caixas, que quando eu passo o mouse ela se expande e exibe um texto e um botão que não existiam antes do efeito acontecer.

O problema é que quando eu mudo o site para a versão mobile, esses efeitos de aparecer o texto e o botão ficam acontecendo infinitamente. Eles nem deveriam aparecer na versão movel, alías.

O código: https://jsfiddle.net/brikohler/86rgnsLx/16/

Alguém sabe me dizer como anular esses efeitos de hover?

@media only screen and (min-device-width: 2px) and (max-device-width: 736px) {

	.div-forum-ideas-text {
		display: none;
	}

	.div-forum-ideas .div-forum-ideas-forum-card {
		margin-left: 5.32%;
		width: 43.40%;
		height: 49.84%;
	}

	.div-rectangle-main{
		width: 100%;
		height: 100%;
		left: 100%;
		margin-top: -46px;
		background: linear-gradient(192deg, #3D4554 -10.36%, #242B36 45.63%, #1D1D1D 117.21%);
	}

	.div-rectangle-main .main-subtitle{
		font-family: Nunito Sans;
		font-style: normal;
		font-weight: normal !important;
		color: #FFFFFF;
		margin-top: 30px;
		margin-bottom: 100px !important;
		font-size: 1.25rem;
		line-height: 200%;
		text-align: center;
	}

	.div-rectangle-main .main-subtitle .main-subsubtitle{
		display: none;
	}

	.div-rectangle-main .main-title{
		padding-top: 10%;
	}
	
	.div-rectangle-main .main-logo{
		display: none !important;
	}
	
	.flexbox-container {
		flex-direction: column;
		flex-wrap: wrap;
		flex: 1 0 26%;
	}
	
	.flexbox-container .card-home-main:nth-of-type(1){
		margin-top: -12% !important;
		margin-left: 6% !important;
	}
	
	.flexbox-container .card-home-main{
		background: #FFFFFF;
		margin-top: 7% !important;
		width: 91% !important;
		height: 160px !important;
	}

	.div-forum-ideas .div-forum-ideas-ideas-card {
		margin-left: 51.28%;
		width: 43.40%;
		height: 49.84%;
	}

	.div-forum-ideas-forum-card .section-icon-circle-forum-ideas-card {
		margin-top: 14.28%;
		margin-left: 20%;
		float: none;
	}

	.div-forum-ideas-ideas-card .section-icon-circle-forum-ideas-card {
		margin-top: 14.28%;
		margin-left: 20%;
		float: none;
	}

	.div-forum-ideas-forum-card .div-forum-ideas-card-title {
		margin-left: auto;
		text-align: center;
	}

	.div-forum-ideas-ideas-card .div-forum-ideas-card-title {
		margin-left: auto;
		text-align: center;
	}

	.div-forum-ideas-card-text {
		display: none;
	}

	
	.card-home-main .card-img{
		height: 0%  !important;
		width: 0% !important;
		margin-left: 3% !important;
		margin-top: 9% !important;
	}
	
	.section-icon-circle-card {
		border-radius: 100%;
		width: 90px !important;
		height: 90px !important;
		padding: 18px;
		margin-top: 0% !important;
		margin-bottom: 0% !important;
		margin-left: 0% !important;
		margin-right: 0% !important;
	}

	.card-home-main .card-info{
		display: flex;
		flex-direction: column;
		margin-top: -7%;
		margin-left: 3%;
	}

	.card-home-main .card-title{
		position: relative;
		font-family: Nunito Sans;
		font-style: normal;
		font-weight: bold;
		width: auto !important;
		font-size: 1.25rem;
		line-height: 100%;
		color: #2CC3D5;
		text-align: center;
	}
	
	.card-home-main .card-text{
		display: none !important;
	}
	
	.card-home-main .card-text-mobile{
		display: flex !important;
		position: relative;
		font-family: Nunito Sans;
		font-style: normal;
		font-weight: normal;
		font-size: 0.75rem;
		word-wrap: normal !important;
		width: 55%;
		margin-left: 30%;
		margin-top: 0%;
		line-height: 16px;
		color: #3D4554;
	}

	.card-home-main .card-info .card-icon{
		display: none !important;
	}
}


.div-rectangle-main{
	width: 100%;
	height: 100%;
	left: 100%;
	top: 492px;
	background: linear-gradient(192deg, #3D4554 -10.36%, #242B36 45.63%, #1D1D1D 117.21%);
}

.div-rectangle-main .main-logo{
	display: block;
	padding-top: 79px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0%;
	width: 250px;
}

.div-rectangle-main .main-title{
	font-family: Nunito Sans;
	font-style: normal;
	font-weight: 800;
	margin-top: 36px;
	font-size: 40px;
	line-height: 55px;
	text-align: center;
	color: #2CC3D5;
}

.div-rectangle-main .main-subtitle{
	font-family: Nunito Sans;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	margin-top: 20px;
	margin-bottom: 200px;
	font-size: 1.25rem;
	line-height: 200%;
	text-align: center;
}

.div-rectangle-main .main-subtitle .main-subsubtitle{
	font-weight: normal;
	
}


.flexbox-container {
	display: flex;
	justify-content: center;
	align-items: start;
}

.flexbox-container .card-home-main{
	width: 18%;
	margin-top: -9%;
	margin-left: 5.8%;
	background: #FFFFFF;
	border: 1px solid #EAEEEE;
	box-sizing: border-box;
	box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.15);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	transition: 400s ease;
  margin-bottom: 20%;
}

.flexbox-container .card-home-main:nth-of-type(1){
	margin-left: 0.8%;
}

.card-home-main .card-img{
	height: auto;
	width: auto;
	margin-left: 25%;
	margin-top: 10%;
}

.section-icon-circle-card {
	border-radius: 100%;
	width: 108px;
	height: 108px;
	padding: 18px;
	margin-top: 4.95%;
	margin-bottom: 4.95%;
	margin-left: 6.42%;
}

.section-icon-circle-card--bot{
	background: rgba(44, 195, 213, 0.2);
}

.section-icon-circle-card--watermelon{
	background: rgba(246, 102, 137, 0.2)
	
}

.section-icon-circle-card--warning{
	background: rgba(255, 207, 51, 0.2);
}

.card-home-main .card-info{
	float: left;
	height: 100%;
	width: 100%;
	max-width: 100% !important;
	padding-top: 0%;
	overflow: auto;
}

.card-home-main .card-info .card-title{
	font-family: Nunito Sans;
	font-style: normal;
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 120%;
	color: #607B99;
	width: 50%;
	margin-left: 25%;
	margin-bottom: 18%;
	text-align: center;
}

.card-home-main .card-info .card-icon{
	margin-left: 40%;
}

.card-home-main .card-info .card-text{
	display: none;
	
}

.flexbox-container .card-home-main:hover{
	height: 420px;
}

.flexbox-container .card-home-main:hover > .card-info .card-icon{
	display: none;
}

.flexbox-container .card-home-main:hover > .card-info .card-text{
	display: block;
	font-family: Nunito Sans;
	font-style: normal;
	font-weight: normal;
	font-size: 0.75rem;
	line-height: 120%;
	color: #738192;
	width: fit-content;
	text-align: center;
	margin-left: 20%;
	margin-right: 20%;
	margin-top: -10%;
}

.flexbox-container .card-home-main:hover > .card-info .card-button{
	display: block;
	margin-bottom: 0%;
	text-align: center;
	background: #2CC3D5;
	color: #FFFFFF;
	font-family: Nunito Sans;
	font-style: normal;
	font-weight: bold;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	margin-top: 17%;
	border-radius: 0px 0px 8px 8px;
	padding: 20px;
}

.card-home-main .card-info .card-text-mobile{
	display: none;
}

.card-home-main .card-info .card-button{
	display: none;
	
}
      <div>
        <div class="div-rectangle-main">
            <h1 class="main-title"> Lore lore lore!</h1>
            <div class="main-subtitle">
             Lore lore lore
              <p class="main-subsubtitle">Lore lore lore lore =)</p>
            </div>
        </div>
            <div class="flexbox-container">
              <div class="card-home-main" id="card1">
                <div class="card-img">
                <div class="section-icon-circle-card section-icon-circle-card--bot">
                    <img src="img/illustrations/Estrela-1.svg"/>
                </div>
                </div>
                <div class="card-info">
                  <div class="card-title">
                    <h3>B</h3>
                  </div>
                  <p class="card-text">Lore lore lore
                  <div class="card-icon">
                    <BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon> 
                  </div>
                  <p class="card-text-mobile">lore lore lore </p>
                </div>
              </div>

              <div class="card-home-main" id="card2">
                <div class="card-img">
                <div class="section-icon-circle-card section-icon-circle-card--watermelon">
                    <img src="img/illustrations/Estrela-2.svg"/>
                </div>
                </div>
                <div class="card-info">
                  <div class="card-title">
                    <h3>C</h3>
                  </div>
                  <div class="card-icon">
                    <BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon> 
                  </div>
                  <p class="card-text">lore lore lore lore </p>
                  <p class="card-text-mobile">lore lore lore 2 </p>
                </div>
              </div>
              <div class="card-home-main" id="card3">
                <div class="card-img">
                  <div class="section-icon-circle-card section-icon-circle-card--warning">
                    <img src="img/illustrations/Estrela-3.svg"/>
                  </div>
                </div>
                <div class="card-info">
                  <div class="card-title">
                  <h3>D </h3>
                  </div>
                  <div class="card-icon">
                    <BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon> 
                  </div>
                  <p class="card-text">lore lore lore </p>
                  <p class="card-text-mobile">lore lore lore2</p>
                </div>
              </div>
            </div>
      </div>

2
  • Cara edita a sua pergunta. Coloca exatamente o código que está usando no momento, vai facilitar para te responder
    – hugocsl
    25/07/2019 às 17:53
  • desculpa! Coloquei 25/07/2019 às 18:06

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .