Div не расширяется при выполнении критериев наведения

#html #jquery

#HTML #jquery

Вопрос:

Для страницы, над которой я работаю, в div с именем projectTitle есть скрытое содержимое, которое показывает, как только этот div наведен, div расширится, чтобы показать его. Этот div вложен в другой div, называемый project, и то, что я пытаюсь сделать, это расширить его вместе с ним, но я не могу понять, почему этого не произойдет. Кроме того, у меня также есть стрелка, которую я хочу оставить в том же положении, когда наведен указатель projectTitle, но она также перемещается вниз. Итак, мой вопрос заключается в следующем: как я могу расширить div проекта, но при этом сохранить стрелку на ее первоначальном месте?

Вот jsfiddle моего кода, чтобы лучше объяснить, о чем я говорю:

http://jsfiddle.net/dmpjL2e9/

Я использую смесь jQuery и css, чтобы попытаться сделать это

 $(document).ready(function() {

  $(".projectTitle").hover(
    //on mouseover
    function() {
      $(this).find(".handoverExpanded").toggleClass('open');
      $(this).find(".project").toggleClass('open');
    });
}); 
 .header img {
  float: left;
  width: 300px;
  height: 300px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 110px;
  font-family: "Raleway", sans-serif;
  text-align: center;
}

#model {
  position: relative;
  top: 200px;
  text-align: center;
}

.management {
  background-color: blue;
  /* Changing background color */
  font-weight: bold;
  /* Making font bold */
  border-radius: 70px;
  /* Making border radius */
  padding: 15px 30px 15px 30px;
  /* Making space around letters */
  font-size: 22px;
  /* Changing font size */
  color: white;
}

.management~.management {
  position: relative;
  top: 20px;
}

.project {
  position: relative;
  top: 50px;
  font-weight: bold;
  font-size: 22px;
  background-color: lightgray;
  /* Changing background color */
  font-weight: bold;
  /* Making font bold */
  border-radius: 70px;
  /* Making border radius */
  padding: 15px 30px 15px 30px;
  /* Making space around letters */
  font-size: 22px;
  /* Changing font size */
  height: 250px;
}

.projectTitle {
  position: inherit;
  background-color: green;
  right: 10px;
  width: 250px;
  border-radius: 10px!important;
  padding: 5px 5px 5px 5px;
}

.arrow1 {
  font-size: 80px;
  color: grey;
  position: absolute;
  bottom: 30px;
  left: 255px;
  display: block;
}

.handoverExpanded {
  position: inherit;
  background-color: blue;
  width: 220px;
  left: 20px;
  display: none;
}

.projectTitle:hover>.handoverExpanded {
  display: block;
}

.projectTitle:hover>.project {
  height: 400px;
}

.handoverExpanded {
  height: 0px;
  -webkit-transition: height, 0.5s linear;
  -moz-transition: height, 0.5s linear;
  -ms-transition: height, 0.5s linear;
  -o-transition: height, 0.5s linear;
  transition: height, 0.5s linear;
}

.handoverExpanded.open {
  height: 70px;
  -webkit-transition: height, 0.5s linear;
  -moz-transition: height, 0.5s linear;
  -ms-transition: height, 0.5s linear;
  -o-transition: height, 0.5s linear;
  transition: height, 0.5s linear;
}

.project.open {
  height: 500px;
  -webkit-transition: height, 0.5s linear;
  -moz-transition: height, 0.5s linear;
  -ms-transition: height, 0.5s linear;
  -o-transition: height, 0.5s linear;
  transition: height, 0.5s linear;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class=h eader>
  <img id="logo" src="images/logo.jpg">

  <h1 class="title"> BUSINESS MODEL</h1>
</div>

<div id="model">
  <div class="management">
    Management Strategy, Goals and Objectives
  </div>
  <div class="management">HSSEQ</div>
  <div class="project">
    <p style="text-decoration: underline">Project Delivery Model</p>
    <div class="projectTitle">
      <p>Project Handover</p>
      <div class="handoverExpanded">
        <p>HSSEQ</p>
      </div>
      <div class="handoverExpanded">
        <p>Project Management</p>
      </div>
      <span class="arrow1">amp;#8594;</span>
    </div>
  </div>
</div> 

Комментарии:

1. Я бы сначала обновил jQuery до 3.6.0

2. удалите свой css . bottom:30px; arrow1 и установите top:0; проверить эту скрипку jsfiddle.net/vgedr9oq

3. Я предполагаю другую работу при наведении

4. @lross15 чтобы увеличить высоту вашего div, вам нужно снова внести изменения в css.. замените ваш div (.project) css height: 250px; на min-height: 250px;

5. Думал, что это будет аналогичное изменение, но не был уверен, еще раз спасибо @groovy_guy, это очень ценится