Web_Dev's questions

我正在布置一个块模仿带有代码的页面。无法对行进行充分编号，值大于 9 的数字开始将相邻块向右移动。下面的截图是一个例子，它应该是怎样的，我得到了什么。请告诉我解决此问题的最佳方法。

我的代码：

HTML

 <div class="practite2__question2">
            <div class="practite2__question2-title">
              Вопрос 2
            </div>
            <p class="practite2__question2-text">
              Что выведет в консоли следующий код:
            </p>

            <div class="practite2__question2-task">

              <div class="practite2__question2-block">
                <div class="practite2__num2">1</div>


                <div class="practite2__num2-text2">
                  <span> <span class="practite2__num2-red">using</span> Microsoft.AspNetCore.Builder;</span>
                </div>

              </div>

              <div class="practite2__question2-block">
                <div class="practite2__num2">2</div>


                <div class="practite2__num2-text2">
                  <span> <span class="practite2__num2-red">using</span> Microsoft.AspNetCore.Hosting;</span>
                </div>

              </div>

              <div class="practite2__question2-block">
                <div class="practite2__num2">3</div>


                <div class="practite2__num2-text2">
                  <span> <span class="practite2__num2-red">using</span> Microsoft.Extensions.Configuration;
                  </span>
                </div>

              </div>

              <div class="practite2__question2-block">
                <div class="practite2__num2">4</div>


                <div class="practite2__num2-text2">
                  <span> <span class="practite2__num2-red">using</span> Microsoft.Extensions.DependencyInjection;
                  </span>
                </div>

              </div>

              <div class="practite2__question2-block">
                <div class="practite2__num2">5</div>


                <div class="practite2__num2-text2">
                  <span> <span class="practite2__num2-red">using</span> Microsoft.Extensions.Hosting;
                  </span>
                </div>

              </div>

              <div class="practite2__question2-block">
                <div class="practite2__num2">6</div>


                <div class="practite2__num2-text2">
                  <span> <span class="practite2__num2-red"></span> </span>
                </div>

              </div>

              <div class="practite2__question2-block">
                <div class="practite2__num2">7</div>


                <div class="practite2__num2-text2">
                  <span> <span class="practite2__num2-red">namespace</span> CacheExamples</span>
                </div>

              </div>

              <div class="practite2__question2-block">
                <div class="practite2__num2">8</div>


                <div class="practite2__num2-text2">
                  <span> <span class="practite2__num2-red">
                    </span> </span>
                </div>
                {
              </div>

              <div class="practite2__question2-block">
                <div class="practite2__num2">9</div>


                <div class="practite2__num2-text2">
                  <span> <span class="practite2__num2-red">public class</span> Startup</span>
                </div>

              </div>

              <div class="practite2__question2-block">
                <div class="practite2__num2">10</div>


                <div class="practite2__num2-text2">
                  <span> <span class="practite2__num2-red"></span> {
                  </span>
                </div>

              </div>


            </div>


          </div>

css

.practite2__block-text{
  color: rgba(96, 98, 104, 1);
  font-family: 'Segoe UI';
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 10px;
}

.practite2__block-title{
  font-family: 'Bitter';
  font-weight: 700;
  font-size: 40px;
  line-height: 50px;
  letter-spacing: 1px;
  color: rgba(35, 38, 45, 1);
  margin-bottom: 60px;
  max-width: 735px;
}

.practite2__block-main{
  display: flex;
}

.practite2__block-title-count{
  font-family: 'Bitter';
  font-weight: 900;
  font-size: 80px;
  line-height: 96px;
  color: rgba(196, 202, 207, 1);
  position: relative;
    bottom: 25px;
}

.practite2__question1-title,
.practite2__question2-title{
  font-family: 'Bitter';
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  color: rgba(35, 38, 45, 1);
}

.practite2__question1-text,
.practite2__question2-text{
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.practite2__question1-task{
max-width: 915px;
  border-radius: 8px;
  border: 2px solid rgba(226, 231, 235, 1);
  margin-bottom: 30px;
  background: rgba(247, 248, 250, 1);
}

.practite2__num,
.practite2__num2{
  font-family: 'Consolas';
    font-weight: 400;
    font-size: 14px;
  line-height: 24px;
  letter-spacing: -1px;
  font-weight: 400;
  color: rgba(160, 161, 166, 1);
  margin-left: 25px;
  padding-right: 10px;
  border-right: 2px solid rgba(117, 182, 135, 1);
}

.practite2__num-text,
.practite2__num2-text2{
    font-family: 'Consolas';
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: rgba(35, 38, 45, 1);
    margin-left: 10px;
}

.practite2__question1-block,
.practite2__question2-block{
  display: flex;
}


.practite2__num2-red,
.practite2__question1-red{
  color: rgba(227, 111, 89, 1);
}

.practite2__question1-blue {
  color: rgba(0, 163, 255, 1);
}

.practite2__question1-answer{
  padding: 17px 20px 25px;
  max-width: 915px;
  border: 2px solid rgba(226, 231, 235, 1);
  border-radius: 8px;
  margin-bottom: 80px;
}

.practite2__question1-anwser-title{
  font-family: 'Bitter';
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  color: rgba(35, 38, 45, 1);
  margin-bottom: 15px;
}

.practite2__question1-answer-text{
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  max-width: 875px;
  padding-top: 14px;
  border-top: 1px solid rgba(226, 231, 235, 1);
}
 

https://codepen.io/Den323/pen/gOeQYLr

我无法让悬停效果正常工作。悬停时，带有文本的所需块应完全展开并显示文本的隐藏部分。但结果，所有相邻的块也开始拉伸到目标扩展块的宽度，所有较低的块都移开，这是不应该的。悬停时，上部块应部分隐藏下部块。屏幕截图显示了它应该是怎样的。

我发生什么事了：

codepen - https://codepen.io/Den323/pen/poLOKxG

我的html：

<div class="courses">
    <div class="container">

      <div class="courses__title">
      Курсы
    </div>

    <div class="courses__inner">


      <div class="courses__item" style="background: 
rgba(255, 182, 182, 1);">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
        s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime? <p class="courses__hidden">
           ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

          <a class="courses__item-link" href="#">
            Детальнее
          </a>
          </p> 
        </p>
      </div>

      <div class="courses__item">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
         s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
         ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFF7B9;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          JS  с нуля и до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
         ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #CCC1F6;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
          ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #CCC1F6;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
         ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFF7B9;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
        JS  с нуля и до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
          ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFB6B6;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
         s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
          ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>
      
          <div class="courses__item" style="background: #C2E0FF;">
          
            <img class="courses__img" src="images/icons/courses.svg" alt="">
            <div class="courses__item-name">
              C++  с нуля до героя
            </div>
            <p class="courses__item-text">
             s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
            <p class="courses__hidden">
              ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          
              <a class="courses__item-link" href="#">
                Детальнее
              </a>
            </p>
            </p>
          </div>

     
      

      


    </div>

    </div>
    
  </div>

我的CSS：

courses {
  padding-bottom: 160px;
}

.courses__title {
  font-family: 'Bitter';
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: 0.5px;
  color: rgba(35, 38, 45, 1);
  margin-top: 36px;
  margin-bottom: 70px;
}

.courses__item {
  padding: 30px 20px;
  max-width: 285px;
  background: rgba(194, 224, 255, 1);
  border-radius: 8px;
  cursor: pointer;


}

.courses__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 2fr));
  grid-row-gap: 37px;
  grid-column-gap: 30px;
}

.courses__item-name {
  font-family: 'Segoe UI';
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  color: rgba(35, 38, 45, 1);
  margin-top: 30px;
  margin-bottom: 20px;
  width: 221px;
}

.courses__item-text {
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;

}


.courses__item-link {
  font-family: 'Bitter';
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: rgba(35, 38, 45, 1);
  text-align: right;
  display: block;
  position: relative;
  margin-top: 20px;
}

.courses__item-link::before {
  content: '';
  width: 95px;
  height: 2px;
  background-color: #000;
  position: absolute;
  top: 18px;
  right: 0;
}



.courses__hidden {
  display: none;
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}


.courses__item:hover .courses__hidden {
  display: inline;
  z-index: 10;

}

有一个块，其中有三个社交网络图标。而且有两个问题。

1. 当鼠标悬停在图标上时，新出现的背景开始移动相邻的元素。一个例子是在屏幕上。
2. 在您用光标点击图标本身之前，它不会将颜色更改为我需要的颜色。在这种情况下，我不能一次将悬停效果组合在两个元素上。结果发现，橙色圆圈出现在图标背景变化之前（如果不用光标戳它，可能根本不显示）。

在第一个屏幕上，什么应该起作用，在第二个和第三个屏幕上，当我将鼠标悬停在图标上时会出现什么（

代码如下。

<div class="learn__footer">
           <span class="learn__footer-share-text">
             Поделиться:
           </span>
           <div class="learn__footer-share">
            
             <ul class="learn__footer-social">
               <li class="learn__footer-social-link">
               
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path
                     d="M12.0004 0.00332907L9.92554 0C7.59455 0 6.08817 1.54552 6.08817 3.93762V5.75313H4.00203C3.82176 5.75313 3.67578 5.89927 3.67578 6.07954V8.71001C3.67578 8.89028 3.82193 9.03625 4.00203 9.03625H6.08817V15.6738C6.08817 15.854 6.23414 16 6.41441 16H9.13623C9.3165 16 9.46247 15.8539 9.46247 15.6738V9.03625H11.9017C12.0819 9.03625 12.2279 8.89028 12.2279 8.71001L12.2289 6.07954C12.2289 5.99299 12.1944 5.91009 12.1334 5.84884C12.0723 5.78758 11.989 5.75313 11.9025 5.75313H9.46247V4.2141C9.46247 3.47438 9.63875 3.09886 10.6023 3.09886L12 3.09836C12.1801 3.09836 12.3261 2.95222 12.3261 2.77211V0.329578C12.3261 0.149642 12.1803 0.00366197 12.0004 0.00332907Z"
                     fill="#E36F59" />
                 </svg>

               </li>
               <li class="learn__footer-social-link">
                 
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <g clip-path="url(#clip0_84_22370)">
                     <path
                       d="M14.356 4.742C15.0067 4.28 15.554 3.70333 16 3.03933V3.03867C15.4047 3.29933 14.7713 3.47267 14.11 3.55667C14.79 3.15067 15.3093 2.51267 15.5533 1.744C14.9193 2.122 14.2193 2.38867 13.4733 2.538C12.8713 1.89667 12.0133 1.5 11.0773 1.5C9.26133 1.5 7.79933 2.974 7.79933 4.78067C7.79933 5.04067 7.82133 5.29067 7.87533 5.52867C5.14867 5.39533 2.73533 4.08867 1.114 2.09733C0.831333 2.58867 0.664667 3.15067 0.664667 3.75533C0.664667 4.89133 1.24933 5.898 2.122 6.48133C1.59467 6.47133 1.078 6.318 0.64 6.07733V6.11333C0.64 7.70733 1.77667 9.03133 3.268 9.33666C3.00067 9.41 2.71 9.44466 2.408 9.44466C2.198 9.44466 1.986 9.43266 1.78733 9.38866C2.212 10.6873 3.41867 11.6427 4.852 11.674C3.736 12.5467 2.31867 13.0727 0.784667 13.0727C0.516 13.0727 0.258 13.0607 0 13.028C1.45333 13.9647 3.17467 14.5 5.032 14.5C10.8207 14.5 14.5933 9.67066 14.356 4.742V4.742Z"
                       fill="#E36F59" />
                   </g>
                   <defs>
                     <clipPath id="clip0_84_22370">
                       <rect width="16" height="16" fill="white" />
                     </clipPath>
                   </defs>
                 </svg>

               </li>
               <li class="learn__footer-social-link">
           
                 <svg  width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path id="instagram"
                     d="M15.9922 16C14.8828 16 13.7922 16 12.6828 16C12.6828 15.9312 12.6828 15.8718 12.6828 15.8093C12.6828 14.0117 12.6859 12.2141 12.6766 10.4166C12.6734 10.0445 12.6359 9.66627 12.5641 9.30051C12.3609 8.2751 11.6891 7.88745 10.6953 7.98749C9.75156 8.0844 9.22344 8.59711 9.06719 9.57249C9.00469 9.96639 8.97656 10.3697 8.97344 10.7698C8.96406 12.4486 8.97031 14.1243 8.97031 15.803C8.97031 15.8656 8.97031 15.925 8.97031 15.9969C7.86406 15.9969 6.76719 15.9969 5.66406 15.9969C5.66406 12.4392 5.66406 8.89097 5.66406 5.32708C6.71719 5.32708 7.76406 5.32708 8.83594 5.32708C8.83594 5.80226 8.83594 6.28058 8.83594 6.80578C8.88594 6.74951 8.90781 6.73075 8.92344 6.70887C9.48281 5.78038 10.3266 5.26768 11.3734 5.10512C12.2391 4.97069 13.0984 5.04259 13.9203 5.38022C14.8641 5.76475 15.4016 6.50566 15.6891 7.45603C15.9047 8.16569 15.9859 8.8941 15.9922 9.62876C16.0047 11.7233 15.9984 13.8179 16.0016 15.9125C15.9984 15.9375 15.9953 15.9625 15.9922 16Z"
                     fill="#E36F59" />
                   <path id="instagram"
                     d="M0.273438 15.9969C0.273438 12.4361 0.273438 8.88473 0.273438 5.32709C1.37344 5.32709 2.46406 5.32709 3.57031 5.32709C3.57031 8.87847 3.57031 12.433 3.57031 15.9969C2.47656 15.9969 1.37969 15.9969 0.273438 15.9969Z"
                     fill="#E36F59" />
                   <path id="instagram"
                     d="M1.92188 3.86402C0.86875 3.86402 0 2.98555 0 1.92263C0 0.862845 0.86875 -0.00311778 1.93125 8.43798e-06C2.98438 0.00313466 3.84375 0.869098 3.84375 1.92576C3.84375 2.98555 2.97187 3.86402 1.92188 3.86402Z"
                     fill="#E36F59" />
                 </svg>
               </li>
             </ul>
           </div>

           <a class="learn__footer-btn" href="#">
             <img class="learn__footer-btn-img" src="images/icons/learn-footer-coffe.svg" alt="">
           </a>



         </div>

.learn__footer {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 20px 30px;
  align-items: center;
  box-shadow: 0px 9px 34px rgba(21, 33, 56, 0.1);
  border-radius: 10px;
  margin-bottom: 67px;
  height: 80px;
}

.learn__footer-btn {
  display: block;
}

.learn__footer-share {
  display: flex;
}

.learn__footer-social {
  display: flex;
  margin-right: 22em !important;
}

.learn__footer-share-text {
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: rgba(35, 38, 45, 1);
  margin-right: 30px;
}

.learn__footer-social-link {
  margin-right: 24px;
  cursor: pointer;
}

svg:hover path {
  fill: white;

}

.learn__footer-social-link:hover {
  background: #E36F59;
  border-radius: 50%;
  padding: 12px;

} 

https://codepen.io/Den323/pen/RwMJvLj

有一个任务：创建一个 checkNumber 函数，它接受一个整数并根据三个不同的属性检查它：

это число положительное?
это число четное?
это число кратно 10?

该函数必须返回一个数组，其中检查结果为布尔值。

我的代码：

function checkNumber(number) {

  let x = [0];
  let y = [0];
  let s = [0];
  let result = []



  if (number > 0) {
    x += number;
    result.push(x)
  }

  if (number % 2 == 0) {
    y += number;
    result.push(y)
  }
  if (number === 10) {
    s += number;
    result.push(s)
  }
  return result;

}

那就是没试过，这些值\u200b\u200b不进数组。