На парящей ползунке детский див

Question

Я хочу сдвинуть дочерний элемент div при наведении на родительский элемент div соответственно. Я сделал функцию, в которой я пытался скользить вниз, но она не работает. Я хочу сдвинуть n-й div при наведении на основной div на соответствующей основе. Я написал функцию в jquery, но она не работает. Пожалуйста, помогите мне.

$(document).ready(function() {
  $(".main").hover(function() {
    myfunction();
  });

  function myfunction(index) {
    $(".main").each(function() {
      $($(this) > div: nth - of -type(2)).slideDown(2000);
    });
  }
});

.main > div:nth-of-type(2) {
  color: blue;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>

      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>
      <button style="margin: 15px 0">Get Result</button>
    </div>
  </div>
</div>

Answer 1

Проблема в том, что ваш селектор в myfunction() имеет неверный синтаксис. Вам нужно использовать find() и поместить туда селектор nth-of-type(). Попробуйте это:

.main > div:nth-of-type(2) {
  color: blue;
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>

      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>
      <button style="margin: 15px 0">Get Result</button>
    </div>
  </div>
</div>

Я хочу навести дочерний элемент div на родительский div соответственно

В этом случае не использовать each() до l oop по всем .main элементам. Просто поищите детей внутри текущего элемента. Также используйте slideToggle(), чтобы сдвинуть их назад, когда мышь покидает родительский элемент:

.main > div:nth-of-type(1) {
  background-color: lavender;
}

.main > div:nth-of-type(2) {
  color: blue;
  transform: scaleY(0);
  background-color: yellow;
  transition: transform, max-height 0.5s;
  max-height: 0;
}

.main:hover > div:nth-of-type(2) {
  transform: scaleY(1);
  max-height: 100px;
}

button {
  margin: 15px 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <button>Get Result</button>
    </div>
  </div>
</div>

Также обратите внимание, что это можно сделать в чистом виде CSS, без JS, не требуется:

.main > div:nth-of-type(1) {
  background-color: lavender;
}

.main > div:nth-of-type(2) {
  color: blue;
  transform: scaleY(0);
  background-color: yellow;
  transition: transform, max-height 0.5s;
  max-height: 0;
}

.main:hover > div:nth-of-type(2) {
  transform: scaleY(1);
  max-height: 100px;
}

button {
  margin: 15px 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <button>Get Result</button>
    </div>
  </div>
</div>