#html #jquery
#HTML #jquery
Вопрос:
Для страницы, над которой я работаю, в div с именем projectTitle есть скрытое содержимое, которое показывает, как только этот div наведен, div расширится, чтобы показать его. Этот div вложен в другой div, называемый project, и то, что я пытаюсь сделать, это расширить его вместе с ним, но я не могу понять, почему этого не произойдет. Кроме того, у меня также есть стрелка, которую я хочу оставить в том же положении, когда наведен указатель projectTitle, но она также перемещается вниз. Итак, мой вопрос заключается в следующем: как я могу расширить div проекта, но при этом сохранить стрелку на ее первоначальном месте?
Вот jsfiddle моего кода, чтобы лучше объяснить, о чем я говорю:
Я использую смесь 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/vgedr9oq3. Я предполагаю другую работу при наведении
4. @lross15 чтобы увеличить высоту вашего div, вам нужно снова внести изменения в css.. замените ваш div (.project) css
height: 250px;
наmin-height: 250px;
5. Думал, что это будет аналогичное изменение, но не был уверен, еще раз спасибо @groovy_guy, это очень ценится