I'm currently developing a project that involves displaying speech bubbles next to each list item when hovered over. These speech bubbles contain relevant information specific to the item being hovered on. To achieve this functionality, I've created 6 different .move (.move1, .move2, .move3. etc) classes with distinct position settings for each speech bubble scenario. You can view a demo of what I'm working on in this jsfiddle link: https://jsfiddle.net/sLemf2z0/1/
Currently, I am attempting to implement a loop in Javascript or jQuery that assigns the appropriate .move class to the corresponding list item being hovered over. However, my current implementation is not functioning as expected. How can I ensure that the correct .move classes are applied based on the list item being hovered over using a loop?
Below is the HTML, CSS, and JavaScript code snippet outside of the jsfiddle environment:
HTML
<ul class="grid1Ul">
<li> Arthritis
<ul class="clearfix ">
<li class="subLi">Arthritis is not good for you.</li>
</ul>
</li>
<li>Back & Neck Pain
<ul class="clearfix ">
<li class="subLi">Neck Pain is not awesome at all</li>
</ul>
</li>
<li> Muscle Strains/Sprains
<ul class="clearfix ">
<li class="subLi">Muscle strins is not awesome at all</li>
</ul>
</li>
<li> Sport/Auto/Work Injuries
<ul class="clearfix">
<li class="subLi">Sports and Auto injuries are definitely not awesome</li>
</ul>
</li>
<li> Orthopedic Post Surgical
<ul class="clearfix">
<li class="subLi ">Surgery is not very awesome either</li>
</ul>
</li>
<li> Gait and Balance Training
<ul class="clearfix">
<li class="subLi">gait and balance training is awesome!!!!!!</li>
</ul>
</li>
</ul>
CSS
.grid1Ul {
color: #982304;
font: italic 700 35px / 48px Arial;
text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.32);
list-style-type: none;
position: absolute;
top: 391px;
left: 121px;
line-height: 1.7em;
z-index: 3;
}
.gridUl li {
position: relative;
}
.subLi {
list-style-type: none;
}
/* Rest of the CSS styles remain unchanged */
Javascript/Jquery
for(i = 1; i < 7; i++) {
var numString = "" + i;
$(".grid1Ul li:nth-of-type(" + numString + ")").hover( function() {
$(this).children().toggleClass("move" + numString);
});
}