I have six boxes with six buttons, and I want to display a separate hidden div attached to each of the boxes when I hover each individual button. As you can see, I've done it for the first box (right now, with all buttons attached to it), but I want to know the ideal/correct way to loop over each individual button, to display the corresponding hidden div.
$(document).ready(function() {
$(".hiddenOne, .hiddenTwo, .hiddenThree, .hiddenFour, .hiddenFive, .hiddenSix").hide();
$(".button").each(function(index) {
$(".button").hover(function() {
$(".hiddenOne").fadeIn();
});
$(".hiddenOne").mouseleave(function() {
$(".hiddenOne").fadeOut();
});
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.centerThis {
text-align: center;
margin-top: 20px;
}
.center2 {
text-align: center;
background-color: red;
}
.container {
padding-top: 50px;
display: flex;
/* establish flex container */
flex-wrap: wrap;
/* enable flex items to wrap */
justify-content: space-around;
}
.button {
background: red;
color: white;
padding: 10px;
}
.buttonTwo {
background: red;
color: white;
padding: 10px;
}
.buttonThree {
background: red;
color: white;
padding: 10px;
}
.buttonFour {
background: red;
color: white;
padding: 10px;
}
.buttonFive {
background: red;
color: white;
padding: 10px;
}
.buttonSix {
background: red;
color: white;
padding: 10px;
}
.white {
color: white;
text-align: center;
padding-top: 50px;
}
.hiddenOne {
height: 300px;
padding-top: 20px;
background-color: red;
color: white;
}
.hiddenTwo {
height: 300px;
background-color: red;
color: white;
}
.hiddenThree {
height: 300px;
background-color: red;
color: white;
}
.hiddenFour {
height: 300px;
background-color: red;
color: white;
}
.hiddenFive {
height: 300px;
background-color: red;
color: white;
}
.hiddenSix {
height: 300px;
background-color: red;
color: white;
}
.itemWithin {
flex: 0 35%;
height: 300px;
margin-bottom: 2%;
background-color: grey;
}
.itemWithin2 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin3 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin4 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin5 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin6 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div >
<div >
<h2 >Mining & Resources</h2>
<p >
Here are the details when view more is hovered
</p>
</div>
<h2 >Mining & Resources</h2>
<button >View More</button>
</div>
<div >
<div >
<h2 >Defence</h2>
</div>
<h2 >Defence</h2>
<button >View More</button>
</div>
<div >
<h2 >Energy & Water</h2>
<button >View More</button>
</div>
<div >
<h2 >Public & Private Infrastucture</h2>
<button >View More</button>
</div>
<div >
<h2 >Commercial & Residential Building</h2>
<button >View More</button>
</div>
<div >
<h2 >Industrial Manufacturing</h2>
<button >View More</button>
</div>
</div>
CodePudding user response:
You can try like this:
$(document).ready(function() {
$(".hiddenOne").hide();
$(".button").hover(function () {
$(this).parent().find('.hiddenOne').fadeIn();
})
$(".hiddenOne").mouseleave(function () {
$(this).fadeOut();
})
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.centerThis {
text-align: center;
margin-top: 20px;
}
.center2 {
text-align: center;
background-color: red;
}
.container {
padding-top: 50px;
display: flex;
/* establish flex container */
flex-wrap: wrap;
/* enable flex items to wrap */
justify-content: space-around;
}
.button {
background: red;
color: white;
padding: 10px;
}
.white {
color: white;
text-align: center;
padding-top: 50px;
}
.hiddenOne {
height: 300px;
padding-top: 20px;
background-color: red;
color: white;
}
.itemWithin {
flex: 0 35%;
height: 300px;
margin-bottom: 2%;
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div >
<div >
<h2 >Mining & Resources</h2>
<p >
Here are the details when view more is hovered
</p>
</div>
<h2 >Mining & Resources</h2>
<button >View More</button>
</div>
<div >
<div >
<h2 >Mining & Resources</h2>
<p >
Here are the details when view more is hovered
</p>
</div>
<h2 >Mining & Resources</h2>
<button >View More</button>
</div>
</div>