Проблема с hover эффектом или хз чем

73
07 февраля 2022, 18:40

Есть сайт

на нем я делаю уже вторую секцию с раскрывающимися текстами(Развернуть-Свернуть) первая секция работает нормально, сегодня сделал вторую стили полностью скопировал с первой, но появился какой-то дрянной hover эффект, ну т.е эффект то старый, он есть и в первой секции, но этот эффект как будто режет текст overflow: hidden или меняет высоту блока развернутой карточки, не понимаю как он это делает и откуда берется...

.details
  &-block
    display: flex
    &__card
      position: relative
      height: 360px
      &-text
        display: table
        margin: 0 auto
        p
          +reg
          font-size: 14px
          max-width: 436px
          display: block
          text-align: center
        div
          display: none
        ol
          font-size: 14px
        ul
          font-size: 14px
      &-title
        text-align: center
        font-size: 22px
      &-open
        position: absolute
        bottom: 0px
        left: 50%
        transform: translate(-50%, -50%)
        display: inline-block
        +reg
        color: #6FAD69
        border-bottom: 1px solid #6FAD69
      &-close
        display: table
        margin: 0 auto
        +reg
        color: #6FAD69
        border-bottom: 1px solid #6FAD69
      &-img
        position: relative
        img
          display: block
          margin: 0 auto
      &:hover
        cursor: pointer
        background-color: lighten(#6FAD69, 10%)
        h1
          color: #fff
          text-decoration: underline
        p
          color: #fff
        ol
          color: #fff
        ul
          color: #fff
        a
          color: #fff
    &__card:first-child
      flex-basis: 33%
      margin-bottom: 30px
    &__card:nth-child(2)      
      flex-basis: 33%
    &__card:nth-child(3)      
      flex-basis: 33%

    <section class="details">
      <div class="container">
        <div class="details-block">
          <div class="details-block__card">
            <h1 class="details-block__card-title">Фундамент дома</h1>
            <!-- /.details-block__card-title -->
            <div class="details-block__card-img">
              <img src="img/details/img-1.jpg" alt="img-1">
              <span></span>
            </div>
            <div class="details-block__card-text">
              <p>Фундамент – основа всей конструкции. От неё в большей степени зависит надёжность и срок службы дома. На что обращаем внимание при выборе основы:</p>
              <p>
                Особенности участка (геодезия, рельеф<br>
                Тяжесть постройки (стеновой материал, этажность, конфигурация).
              </p>
              <a href="javascript:void(0)" class="details-block__card-open show">Развернуть</a>
              <div class="var">
                <p>Основные виды фундаментов:</p>
                <ol>
                  <li>Ленточный (заглублённый и мелкозаглублёный). <br>
                  <br>
                  <br>
                  Хороший вариант для фундамента под деревянный дом;
                 </li>
                  <li>Монолитный – самый надёжный из всех;</li>
                  <li>Свайный или свайно-ростверковый.</li>
                </ol>
                <p>
                  Сделать правильный расчет, исходя из индивидуальных особенностей, может только специалист.
                </p>
                <a href="javascript:void(0)" class="details-block__card-close hide">Свернуть</a>
              </div>
              <!-- /.var -->
            </div>
            <!-- /.details-block__card-text -->
          </div>
          <!-- /.details-block__card -->
          <div class="details-block__card">
            <h1 class="details-block__card-title">Крыши домов</h1>
            <!-- /.details-block__card-title -->
            <div class="details-block__card-img">
              <img src="img/details/img-2.jpg" alt="img-2">
              <span></span>
            </div>
            <div class="details-block__card-text">
              <p>Крыши могут быть: плоские, односкатные, многоскатные, купольные, мансардные.</p>
              <p>Выбор кровельного материала зависит от формы крыши. Наиболее часто используется мягкая кровля, металлочерепица (не подойдёт для купольной крыши), керамическая черепица.</p>
              <a href="javascript:void(0)" class="details-block__card-open show">Развернуть</a>
              <div class="var">
              <p>
                Монтаж, реконструкция, замена мягкой кровли дома, металочерепицы требуют
                <br>
                <br>
                <br>
                профессионализма и опыта. Особенно на многоскатных и мансардных крышах.
              </p>
              <p>Работая с нами, вы получаете:</p>
              <ol>
                <li>Гарантию от компании с большим опытом в строительстве;</li>
                <li>Высокий профессионализм мастеров;</li>
                <li>Работа с любой конфигурацией крыши и кровельным материалом;</li>
                <li>Демонтаж, монтаж, ремонт любой сложности.</li>
              </ol>
              <a href="javascript:void(0)" class="details-block__card-close hide">Свернуть</a>
              </div>
              <!-- /.var -->
            </div>
            <!-- /.details-block__card-text -->
          </div>
          <!-- /.details-block__card -->
          <div class="details-block__card">
            <h1 class="details-block__card-title">Водоснабжение и канализация</h1>
            <!-- /.details-block__card-title -->
            <div class="details-block__card-img">
              <img src="img/details/img-3.jpg" alt="img-3">
            </div>
            <div class="details-block__card-text">
              <p>Невозможно представить комфортного проживания без организованного водоснабжения и канализации. Подключение к центральным системам возможно только в редких случаях. Существует два способа по организации водоснабжения частного дома:</p>
              <a href="javascript:void(0)" class="details-block__card-open show">Развернуть</a>
              <div class="var">
                <ul>Обустройство артезианской скважины;</ul>
                <ul>Подача воды из колодца.</ul>
                <p>Для устройства канализации способа тоже<br><br> два:</p>
                <ul>
                  <li>Системы биологической очистки;</li>
                  <li>Септик на участке.</li>
                </ul>
                <p>Организовать удобства, привычные для городской жизни, в частном доме сегодня не представляют сложностей. Это возможно для любого дома, в независимости удалённости от города.</p>
                <a href="javascript:void(0)" class="details-block__card-close hide">Свернуть</a>
              </div>
              <!-- /.var -->
            </div>
            <!-- /.details-block__card-text -->
          </div>
          <!-- /.details-block__card -->
        </div>
        <!-- /.details-block -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /.details -->

 /* Разворачивание - сворачивание card service */
  $('.service-block__card-open .details-block__card-open').click(function(){
    $(this).next('.var').slideToggle('normal');
    return false;
  });
  $('.service-block__card-close .details-block__card-close').click(function(){
    $(this).parent('.var').slideToggle('normal');
  });
  $('.show').click(function() {
    $(this).hide().next('.var').slideDown().find('.hide').show();
  });
  $('.hide').click(function() {
    $(this).hide().closest('.var').slideUp().prev('.show').show();
  });
Answer 1

UPD: добавил ко всем вариантам вендорные префиксы
Вот пример, как можно это сделать на JavaScript. Вариант 1

let hide = document.querySelectorAll('.service-block__card-open'); 
let cardText = document.querySelectorAll('.service-block__card-text'); 
let hide__text = document.querySelectorAll('.hide__text'); 
let heightHide = []; 
 
document.addEventListener('DOMContentLoaded', () => { 
 
for (let i = 0; i < hide.length; i++) { 
    heightHide.push(hide__text[i].offsetHeight); 
    hide__text[i].style.height = '0px'; 
    hide[i].addEventListener('click', () => { 
        cardText[i].classList.toggle('active'); 
        if (cardText[i].classList.contains('active')) { 
            hide__text[i].style.height = heightHide[i] + 'px';; 
        } else { 
            hide__text[i].style.height = '0px'; 
        } 
    }); 
} 
 
}); 
 
let openElem = document.querySelectorAll('.service-block__card-open'); 
let openSpan = document.querySelectorAll('.openSpan'); 
 
for (let i = 0; i < openElem.length; i++) { 
    openElem[i].addEventListener('click', () => { 
        openElem[i].classList.toggle('active'); 
        if (openElem[i].classList.contains('active')) { 
            openSpan[i].innerHTML = 'С'; 
        } else { 
            openSpan[i].innerHTML = 'Раз'; 
        } 
    }); 
}
*, *:before, *:after { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
} 
 
body { 
	margin: 0; 
	font-size: 16px; 
	font-family: 'Open Sans', sans-serif; 
} 
 
img { 
	display: block; 
	max-width: 100%; 
	height: auto; 
} 
 
.service-block__card { 
	background-color: white; 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: -webkit-box; 
	display: -moz-box; 
	display: -ms-flexbox; 
	display: flex; 
	-webkit-box-orient: vertical; 
	-webkit-box-direction: normal; 
	-webkit-flex-direction: column; 
	   -moz-box-orient: vertical; 
	   -moz-box-direction: normal; 
	    -ms-flex-direction: column; 
	        flex-direction: column; 
	max-width: 500px; 
	margin: 10px auto 0; 
	padding: 10px; 
	-webkit-box-align: center; 
	-webkit-align-items: center; 
	   -moz-box-align: center; 
	    -ms-flex-align: center; 
	        align-items: center; 
	-webkit-transition: all .2s linear; 
	-o-transition: all .2s linear; 
	-moz-transition: all .2s linear; 
	transition: all .2s linear; 
} 
 
.service-block__card-text { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: -webkit-box; 
	display: -moz-box; 
	display: -ms-flexbox; 
	display: flex; 
	-webkit-box-orient: vertical; 
	-webkit-box-direction: normal; 
	-webkit-flex-direction: column; 
	   -moz-box-orient: vertical; 
	   -moz-box-direction: normal; 
	    -ms-flex-direction: column; 
	        flex-direction: column; 
	overflow: hidden; 
} 
 
.hide__text { 
	overflow: hidden; 
	-webkit-transition: all .4s linear; 
	-o-transition: all .4s linear; 
	-moz-transition: all .4s linear; 
	transition: all .4s linear; 
} 
 
.service-block__card-open { 
	color: black; 
	font-weight: bold; 
	margin: 10px auto; 
	font-size: 20px; 
	cursor: pointer; 
	-moz-user-select: none; 
	-webkit-user-select: none; 
	    -ms-user-select: none; 
	        user-select: none;   
}
<div class="service-block__card" id="card"> 
	<h1 class="service-block__card-title">Электрика</h1> 
	<div class="service-block__card-img"> 
		<img src="https://picsum.photos/800/500" alt="service-5"> 
		<span></span> 
	</div> 
	<div class="service-block__card-text"> 
		<p>Все понимают, что электрика – дело ответственное, сопряжённое с безопасностью и одновременно комфортом проживания.</p> 
		<p>Электропроводка может быть устроена двумя способами:</p> 
		<ul> 
			<li>Закрытым. Прячется внутри стен и перекрытий, не портит внешнего вида. Наиболее часто применяется в жилых помещениях;</li> 
			<li>Открытым. Располагается на поверхности стен и потолков, расположена в специальных коробах, может быть вмонтирована в плинтуса.</li> 
		</ul> 
		<a class="service-block__card-open"><span class="openSpan">Раз</span>вернуть</a> 
		<div class="hide__text"> 
			<p>Электромонтаж в городской квартире и каменном загородном доме имеют много общего. Отличительные особенности для каменной загородной постройки:</p> 
			<ol> 
				<li>Обязательное устройство заземления;</li> 
				<li>Устройство молниезащиты;</li> 
				<li>Обязательное применение устройств защитного отключения.</li> 
			</ol> 
			<p>Монтаж электропроводки в деревянном доме имеет свои особенности. Сопряжено это с высокой пожароопасностью. Прежде всего, надо правильно рассчитать расчет нагрузок, исходя из него, подобрать кабель. Прокладка проводки внутри деревянных стен и перекрытий должна проводиться только в металлической трубе.</p> 
			<p>Хотите жить комфортно? Ответственно относитесь к безопасности проживания?</p> 
			<p>Выбирайте профессионалов!</p> 
		</div> 
	</div> 
</div>

Вариант 2
Осторожно! Я проверил, это не работает в Firefox, работает в Google Chrome, другие браузеры не смотрел, чтобы не схватить инсульт

let hide = document.querySelectorAll('.service-block__card-open'); 
let cardText = document.querySelectorAll('.service-block__card-text'); 
let hide__text = document.querySelectorAll('.hide__text'); 
let heightHide = []; 
 
document.addEventListener('DOMContentLoaded', () => { 
 
for (let i = 0; i < hide.length; i++) { 
    heightHide.push(hide__text[i].offsetHeight); 
    hide__text[i].style.height = '0px'; 
    hide[i].addEventListener('click', () => { 
        cardText[i].classList.toggle('active'); 
        if (cardText[i].classList.contains('active')) { 
            hide__text[i].style.height = heightHide[i] + 'px';; 
        } else { 
            hide__text[i].style.height = '0px'; 
        } 
    }); 
} 
 
}); 
 
let openSpan = document.querySelectorAll('.openSpan'); 
 
for (let i = 0; i < openSpan.length; i++) { 
    openSpan[i].addEventListener('click', () => { 
        openSpan[i].classList.toggle('active'); 
    }); 
}
*, *:before, *:after { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
} 
 
body { 
	margin: 0; 
	font-size: 16px; 
	font-family: 'Open Sans', sans-serif; 
} 
 
img { 
	display: block; 
	max-width: 100%; 
	height: auto; 
} 
 
.service-block__card { 
	background-color: white; 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: -webkit-box; 
	display: -moz-box; 
	display: -ms-flexbox; 
	display: flex; 
	-webkit-box-orient: vertical; 
	-webkit-box-direction: normal; 
	-webkit-flex-direction: column; 
	   -moz-box-orient: vertical; 
	   -moz-box-direction: normal; 
	    -ms-flex-direction: column; 
	        flex-direction: column; 
	max-width: 500px; 
	margin: 10px auto 0; 
	padding: 10px; 
	-webkit-box-align: center; 
	-webkit-align-items: center; 
	   -moz-box-align: center; 
	    -ms-flex-align: center; 
	        align-items: center; 
	-webkit-transition: all .2s linear; 
	-o-transition: all .2s linear; 
	-moz-transition: all .2s linear; 
	transition: all .2s linear; 
} 
 
.service-block__card-text { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: -webkit-box; 
	display: -moz-box; 
	display: -ms-flexbox; 
	display: flex; 
	-webkit-box-orient: vertical; 
	-webkit-box-direction: normal; 
	-webkit-flex-direction: column; 
	   -moz-box-orient: vertical; 
	   -moz-box-direction: normal; 
	    -ms-flex-direction: column; 
	        flex-direction: column; 
	overflow: hidden; 
} 
 
.hide__text { 
	overflow: hidden; 
	-webkit-transition: all .4s linear; 
	-o-transition: all .4s linear; 
	-moz-transition: all .4s linear; 
	transition: all .4s linear; 
} 
 
.service-block__card-open { 
	color: black; 
	font-weight: bold; 
	margin: 10px auto; 
	font-size: 20px; 
	cursor: pointer; 
	-moz-user-select: none; 
	-webkit-user-select: none; 
	    -ms-user-select: none; 
	        user-select: none;   
	display: block; 
} 
 
:root { 
	--atf: cubic-bezier(.58,-0.71,.41,1.55); 
	--spanNum: 2rem; /* Размер текста .openSpan */ 
	--spanNumTopB: -webkit-calc(-1 * ( var(--spanNum)*1.2 ) ); 
	--spanNumTopB: -moz-calc(-1 * ( var(--spanNum)*1.2 ) ); 
	--spanNumTopB: calc(-1 * ( var(--spanNum)*1.2 ) ); 
	--spanNumLeftB: -webkit-calc( -1 * ( (var(--spanNum)*11)/160 ) ); 
	--spanNumLeftB: -moz-calc( -1 * ( (var(--spanNum)*11)/160 ) ); 
	--spanNumLeftB: calc( -1 * ( (var(--spanNum)*11)/160 ) ); 
	--spanNumSec: 1s; /* Время анимации */ 
} 
 
.openSpan { 
	display: -webkit-box; 
	display: -webkit-flex; 
	display: -moz-box; 
	display: -ms-flexbox; 
	display: flex; 
	font-size: var(--spanNum); 
	font-family: sans-serif; 
	font-weight: bold; 
	text-transform: uppercase; 
	-webkit-perspective: 1000px; 
	   -moz-perspective: 1000px; 
	        perspective: 1000px; 
	-moz-user-select: none; 
	-webkit-user-select: none; 
	    -ms-user-select: none; 
	        user-select: none; 
	cursor: pointer; 
	max-height: var(--spanNum); 
} 
 
.openSpan .ab { 
	position: relative; 
	-webkit-transform-style: preserve-3d; 
	   -moz-transform-style: preserve-3d; 
	        transform-style: preserve-3d; 
	-webkit-transition: var(--spanNumSec) var(--atf) transform; 
	-o-transition: var(--spanNumSec) var(--atf) transform; 
	-moz-transition: var(--spanNumSec) var(--atf) transform; 
	transition: var(--spanNumSec) var(--atf) transform; 
} 
 
.openSpan .ab > div { 
	width: 100%; 
	-webkit-backface-visibility: hidden; 
	   -moz-backface-visibility: hidden; 
	        backface-visibility: hidden; 
	text-align: end; 
} 
 
.openSpan .b { 
	margin-top: var(--spanNumTopB); 
	margin-left: var(--spanNumLeftB); 
	-webkit-transform: rotateX(180deg) rotateZ(90deg); 
	   -moz-transform: rotateX(180deg) rotateZ(90deg); 
	        transform: rotateX(180deg) rotateZ(90deg); 
} 
 
.openSpan .c { 
	-webkit-transition: var(--spanNumSec) var(--atf) transform; 
	-o-transition: var(--spanNumSec) var(--atf) transform; 
	-moz-transition: var(--spanNumSec) var(--atf) transform; 
	transition: var(--spanNumSec) var(--atf) transform; 
} 
 
.openSpan.active .ab{ 
	-webkit-transform: rotateX(180deg) rotateZ(90deg); 
	   -moz-transform: rotateX(180deg) rotateZ(90deg); 
	        transform: rotateX(180deg) rotateZ(90deg); 
} 
 
.openSpan.active .c { 
	-webkit-transform: rotateX(-360deg); 
	   -moz-transform: rotateX(-360deg); 
	        transform: rotateX(-360deg); 
}
<div class="service-block__card" id="card"> 
	<h1 class="service-block__card-title">Электрика</h1> 
	<div class="service-block__card-img"> 
		<img src="https://picsum.photos/800/500" alt="service-5"> 
		<span></span> 
	</div> 
	<div class="service-block__card-text"> 
		<p>Все понимают, что электрика – дело ответственное, сопряжённое с безопасностью и одновременно комфортом проживания.</p> 
		<p>Электропроводка может быть устроена двумя способами:</p> 
		<ul> 
			<li>Закрытым. Прячется внутри стен и перекрытий, не портит внешнего вида. Наиболее часто применяется в жилых помещениях;</li> 
			<li>Открытым. Располагается на поверхности стен и потолков, расположена в специальных коробах, может быть вмонтирована в плинтуса.</li> 
		</ul> 
		<a class="service-block__card-open"> 
			<span class="openSpan"> 
				<div class="ab"> 
					<div class="a">Раз</div> 
					<div class="b">С</div> 
				</div> 
				<div class="c">вернуть</div> 
			</span> 
		</a> 
		<div class="hide__text"> 
			<p>Электромонтаж в городской квартире и каменном загородном доме имеют много общего. Отличительные особенности для каменной загородной постройки:</p> 
			<ol> 
				<li>Обязательное устройство заземления;</li> 
				<li>Устройство молниезащиты;</li> 
				<li>Обязательное применение устройств защитного отключения.</li> 
			</ol> 
			<p>Монтаж электропроводки в деревянном доме имеет свои особенности. Сопряжено это с высокой пожароопасностью. Прежде всего, надо правильно рассчитать расчет нагрузок, исходя из него, подобрать кабель. Прокладка проводки внутри деревянных стен и перекрытий должна проводиться только в металлической трубе.</p> 
			<p>Хотите жить комфортно? Ответственно относитесь к безопасности проживания?</p> 
			<p>Выбирайте профессионалов!</p> 
		</div> 
	</div> 
</div>

READ ALSO
Что такое &quot;Обычная кнопка&quot; (button type=&#39;button&#39;)
HTML

Что такое "Обычная кнопка" (button type='button')

Есть кнопки для создания "обычных кнопок"

 77
Как разместить фоновую картинку?
HTML

Как разместить фоновую картинку?

https://ibbco/4VqLgcS - ссылка на картинку

 108
заменить src=&quot;&quot; во фрейме
HTML

заменить src="" во фрейме

При вставке в форму кода от видео ссылки, необходимо что бы данное видео проигрывалось в плеере ниженапример youtube

 120
Python _getch как в с++
c++

Python _getch как в с++

Как сделать функцию аналогичную _getch из с++

 78