Javascript 增加悬停时项目的宽度和高度
我想增加滑动条单个项目的Javascript 增加悬停时项目的宽度和高度,javascript,html,css,Javascript,Html,Css,我想增加滑动条单个项目的悬停上的宽度和高度。我用香草JS做滑块。它正在工作，但在底部显示滚动条。如果我给 `"slideshow-wrapper="overflow: hidden;"` 然后滚动条不显示。但是项目的顶部元素没有显示在悬停上。在这里，我将一个固定的高度设置为容器，这样项目就可以显示在其他部分上。我还使用了height `"overflow: hidden;"` , 但这让事情变得更复杂。项目的底部元素也未显示
悬停宽度高度底部显示滚动条。如果我给
`"slideshow-wrapper="overflow: hidden;"`
然后滚动条不显示。但是项目的顶部元素没有显示在悬停
上。在这里，我将一个固定的高度设置为容器
，这样项目就可以显示在其他部分上。我还使用了height
`"overflow: hidden;"` ,
但这让事情变得更复杂。项目的底部元素也未显示
`<section class="career-recommendations-section theme-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<span class="slider-arrow">‹</span>
<span class="slider-arrow">›</span>
<div class="career-recommendations-wrapper">
<div class="single-career-recommedation career-recommedation-hover-style">
<div class="career-recommedation-content">
<div class="career-recommedation-content-header">
<div class="career-recommedation-title">
<h6>Senior Designer Manager</h6>
</div>
<div class="career-recommedation-badge">
<svg
id="Capa_1"
enable-background="new 0 0 80 70"
height="64"
width="64"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<g>
<path
d="m256 480-195-131.976v-380.024h390v380.024zm180-140.003h.293z"
fill="#00C7B2"
/>
</g>
<path
d="m256 480 195-131.976v-380.024h-195z"
fill="#00957A"
/>
</g>
</svg>
<h3>1</h3>
</div>
</div>
<p>We’re looking for a seasoned designer, leader and collaborator, with an amazing track in hands on directing, crafting and building world class products.</p>
<div class="career-recommedation-details">
<h4>Why You Fit</h4>
<div class="details-inner media">
<div class="media-left">
<img class="ComplexProblem" src="../assets/img/employee/ComplexProblem.png" alt="">
</div>
<div class="media-body">
<h6>Complex Problem Solving</h6>
</div>
</div>
<div class="details-icons">
<a class="button btn-color" href="#">Details</a>
<ul class="details-icons-lists">
<li><a class="single-details-icon active" href="#"><i class="fas fa-grin-hearts"></i></a></li>
<li><a class="single-details-icon" href="#"><i class="fas fa-frown-open"></i></a></li>
</ul>
</div>
</div>
</div>
<p class="career-recommedation-cart color-one">
CQ: 90%
</p>
</div>
<div class="single-career-recommedation career-recommedation-hover-style">
<div class="career-recommedation-content">
<div class="career-recommedation-content-header">
<div class="career-recommedation-title">
<h6>UED Leader</h6>
</div>
<div class="career-recommedation-badge">
<svg
id="Capa_1"
enable-background="new 0 0 80 70"
height="64"
width="64"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<g>
<path
d="m256 480-195-131.976v-380.024h390v380.024zm180-140.003h.293z"
fill="#1C89BF"
/>
</g>
<path
d="m256 480 195-131.976v-380.024h-195z"
fill="#36A3C9"
/>
</g>
</svg>
<h3>2</h3>
</div>
</div>
<p>Experienced design leader and manager of a team of designers Responsible for the growth and maintenance of a high functioning team</p>
<div class="career-recommedation-details">
<h4>Why You Fit</h4>
<div class="details-inner media">
<div class="media-left">
<img class="ComplexProblem" src="../assets/img/employee/ComplexProblem.png" alt="">
</div>
<div class="media-body">
<h6>Complex Problem Solving</h6>
</div>
</div>
<div class="details-icons">
<a class="button btn-color" href="#">Details</a>
<ul class="details-icons-lists">
<li><a class="single-details-icon active" href="#"><i class="fas fa-grin-hearts"></i></a></li>
<li><a class="single-details-icon" href="#"><i class="fas fa-frown-open"></i></a></li>
</ul>
</div>
</div>
</div>
<p class="career-recommedation-cart color-two">
CQ: 80%
</p>
</div>
<div class="single-career-recommedation career-recommedation-hover-style">
<div class="career-recommedation-content">
<div class="career-recommedation-content-header">
<div class="career-recommedation-title">
<h6>Senior Designer Manager</h6>
</div>
<div class="career-recommedation-badge">
<svg
id="Capa_1"
enable-background="new 0 0 80 70"
height="64"
width="64"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<g>
<path
d="m256 480-195-131.976v-380.024h390v380.024zm180-140.003h.293z"
fill="#476D77"
/>
</g>
<path
d="m256 480 195-131.976v-380.024h-195z"
fill="#294957"
/>
</g>
</svg>
<h3>3</h3>
</div>
</div>
<p>We’re looking for a seasoned designer, leader and collaborator, with an amazing track in hands on directing, crafting and building world class products.</p>
</div>
<p class="career-recommedation-cart color-three">
CQ: 66%
</p>
</div>
<div class="single-career-recommedation career-recommedation-hover-style">
<div class="career-recommedation-content">
<div class="career-recommedation-content-header">
<div class="career-recommedation-title">
<h6>UED Leader</h6>
</div>
<div class="career-recommedation-badge">
<svg
id="Capa_1"
enable-background="new 0 0 80 70"
height="64"
width="64"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<g>
<path
d="m256 480-195-131.976v-380.024h390v380.024zm180-140.003h.293z"
fill="#7534C2"
/>
</g>
<path
d="m256 480 195-131.976v-380.024h-195z"
fill="#441F69"
/>
</g>
</svg>
<h3>4</h3>
</div>
</div>
<p>Experienced design leader and manager of a team of designers Responsible for the growth and maintenance of a high functioning team</p>
</div>
<p class="career-recommedation-cart color-four">
CQ: 44%
</p>
</div>
<div class="single-career-recommedation career-recommedation-hover-style">
<div class="career-recommedation-content">
<div class="career-recommedation-content-header">
<div class="career-recommedation-title">
<h6>UED Leader</h6>
</div>
<div class="career-recommedation-badge">
<svg
id="Capa_1"
enable-background="new 0 0 80 70"
height="64"
width="64"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<g>
<path
d="m256 480-195-131.976v-380.024h390v380.024zm180-140.003h.293z"
fill="#7534C2"
/>
</g>
<path
d="m256 480 195-131.976v-380.024h-195z"
fill="#441F69"
/>
</g>
</svg>
<h3>4</h3>
</div>
</div>
<p>Experienced design leader and manager of a team of designers Responsible for the growth and maintenance of a high functioning team</p>
</div>
<p class="career-recommedation-cart color-four">
CQ: 44%
</p>
</div>
<div class="single-career-recommedation career-recommedation-hover-style">
<div class="career-recommedation-content">
<div class="career-recommedation-content-header">
<div class="career-recommedation-title">
<h6>UED Leader</h6>
</div>
<div class="career-recommedation-badge">
<svg
id="Capa_1"
enable-background="new 0 0 80 70"
height="64"
width="64"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<g>
<path
d="m256 480-195-131.976v-380.024h390v380.024zm180-140.003h.293z"
fill="#7534C2"
/>
</g>
<path
d="m256 480 195-131.976v-380.024h-195z"
fill="#441F69"
/>
</g>
</svg>
<h3>4</h3>
</div>
</div>
<p>Experienced design leader and manager of a team of designers Responsible for the growth and maintenance of a high functioning team</p>
</div>
<p class="career-recommedation-cart color-four">
CQ: 44%
</p>
</div>
</div>
</div>
</div>
</div>
</section>`
`
香草JS：
` var arrow = document.getElementsByClassName('slider-arrow');
var slide = document.getElementsByClassName('career-recommendations-wrapper');
var l = 0;
arrow[1].onclick = ()=> {
l++;
for (var i of slide) {
if (l == 0) { i.style.left = "0px";}
if (l == 1) { i.style.left = "-600px";}
if (l == 2) { i.style.left = "-1200px";}
// if (l == 3) { i.style.left = "-1800px";}
// if (l == 4) { i.style.left = "-2400px";}
if (l > 2) { l = 2;}
}
}
arrow[0].onclick = ()=> {
l--;
for (var i of slide) {
if (l == 0) { i.style.left = "0px";}
if (l == 1) { i.style.left = "-600px";}
if (l == 2) { i.style.left = "-1200px";}
// if (l == 3) { i.style.left = "-1800px";}
if (l < 0) { l = 0;}
}
}`
`var arrow=document.getElementsByClassName（'slider-arrow'）；
var slide=document.getElementsByClassName（'career-recommendations-wrapper'）；
var l=0；
箭头[1]。onclick=（）=>{
l++；
用于（幻灯片的变量i）{
如果（l==0）{i.style.left=“0px”；}
如果（l==1）{i.style.left=“-600px”；}
如果（l==2）{i.style.left=“-1200px”；}
//如果（l==3）{i.style.left=“-1800px”；}
//如果（l==4）{i.style.left=“-2400px”；}
如果（l>2）{l=2；}
}
}
箭头[0]。onclick=（）=>{
l--；
用于（幻灯片的变量i）{
如果（l==0）{i.style.left=“0px”；}
如果（l==1）{i.style.left=“-600px”；}
如果（l==2）{i.style.left=“-1200px”；}
//如果（l==3）{i.style.left=“-1800px”；}
如果（l<0）{l=0；}
}
}`
在这里你可以得到一点想法。
实际上我想要这样的悬停效果：
` var arrow = document.getElementsByClassName('slider-arrow');
var slide = document.getElementsByClassName('career-recommendations-wrapper');
var l = 0;
arrow[1].onclick = ()=> {
l++;
for (var i of slide) {
if (l == 0) { i.style.left = "0px";}
if (l == 1) { i.style.left = "-600px";}
if (l == 2) { i.style.left = "-1200px";}
// if (l == 3) { i.style.left = "-1800px";}
// if (l == 4) { i.style.left = "-2400px";}
if (l > 2) { l = 2;}
}
}
arrow[0].onclick = ()=> {
l--;
for (var i of slide) {
if (l == 0) { i.style.left = "0px";}
if (l == 1) { i.style.left = "-600px";}
if (l == 2) { i.style.left = "-1200px";}
// if (l == 3) { i.style.left = "-1800px";}
if (l < 0) { l = 0;}
}
}`