Just starting out with jQuery and struggling to accomplish my goal. Need to work with HTML only as the server doesn't support PHP or Ruby, and I'm still learning those languages. Working with the latest jQuery version 1.10.2.
My issue involves a menu with tiles, each containing a preview image and a title ribbon. My aim is to change the opacity of the title ribbon's background when the mouse hovers over a tile.
I've managed to make it work to some extent, but the problem is that when hovering over a tile, all the title ribbons change opacity, not just the one being hovered over. I tried using the .index method to get the index number of an 'li' element and use it as an identifier, but that didn't work as expected. I also attempted the following:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this) <some code would come here to do stuff as mouse cursor enters the item area> ;
},
mouseleave: function () {
$(this) <some code would come here to undo stuff as mouse cursor leaves the item area>;
}
});
});
</script>
However, I couldn't figure out how to proceed from there to modify the $('.tt1').css.
Below are the relevant code snippets I have so far...
jQuery code:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$('.tt1').css('opacity', '1.0');
},
mouseleave: function () {
$('.tt1').css('opacity', '0.6');
}
});
});
</script>
HTML code:
<menu>
<ul class="collumn-left">
<li><a href="#About"><div class="tt1">About</div></a></li>
<li><a href="#Test"><div class="tt1">Test</div></a></li>
</ul>
<ul class="collumn-right">
<li><a href="#Random"><div class="tt1">Random</div></a></li>
<li><a href="#More"><div class="tt1">More</div></a></li>
</ul>
</menu>
CSS code:
/* Your CSS styles go here */