I am aiming to achieve a function where hovering over a div with the "rectangle" class will display another div with the "description" class. Initially, the description div will have a display value of "none", but upon hovering, it should become visible.
var $projectOneHtml = $(".hTML-1")
var $projectTwoHtml = $(".hTML-2")
var $projectThreeHtml = $(".hTML-3")
function showDescription(x) {
$(x).hover(function() {
$(".description").show();
$(this).addClass("hover");
}, function() {
$(".description").hide();
$(this).removeClass("hover");
})
};
showDescription($projectOneHtml);
showDescription($projectTwoHtml);
showDescription($projectThreeHtml);.description {
background-color: white;
border: 1px solid white;
width: 354px;
height: 300px;
text-align: center;
color: black;
font-size: 18px;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="projects">
<div class="rectangle hTML-1">
<img src="Projects/card.jpg" width="354px" height="180px">
<div class="description">
<p>A simple business card was created by HTML and CSS.</p>
</div>
</div>
<div class="rectangle hTML-2">
<img src="Projects/clock.jpg" width="354px" height="180px">
<div class="description">
<p>A simple clock design created using HTML and CSS.</p>
</div>
</div>
<div class="rectangle hTML-3">
<img src="Projects/canvas.jpg" width="354px" height="180px">
<div class="description">
<p>An artistic canvas made with HTML and CSS.</p>
</div>
</div>
</div>The issue is: when I hover, all three divs are affected simultaneously. What I want is for only the specific description div to be displayed when hovering over its corresponding rectangle div. I hope this clarifies things. Thank you for your time.