I have successfully implemented a jQuery hover function:
$('.deleteButton').hover(function(){
$(this).css('opacity', '1');
},
function(){
$(this).css('opacity', '.5');
});
The function was functioning properly when the HTML element was hardcoded into the index.html document, but now when I import the element from a template, it does not work as expected.
Below is the template code:
<div class="logBox">
<div class="dateAndLocation">
<p>{{ info.date | date }}</p>
<p style="margin-top:-.7em">{{ info.location }}</p>
</div>
<div class="routeNameBox">
<p class="routeName">{{ info.routeName }}</p>
<p class="gradeAndType">{{ info.grade }} | {{ info.type }}</p>
</div>
<div class="timeAndLevelBox">
<div class="timeBox pull-left">
<p class="timeText">{{ info.time }}</p>
</div>
<div class="pclBox pull-right">
<p class="pclText">{{ info.challengeLevel }}</p>
</div>
</div>
<div class="notesBox">
<p class="notesText">{{ info.notes }}</p>
</div>
<div class="photoCircle" style="background-image:url({{ info.photo }})"></div>
</div>
<div class="deleteButton"><p>—</p></div>
index.html code:
<div class="container" style="min-width:1200px; margin:auto;" ng-repeat="climbLog in climbLogs">
<climb-log info="climbLog"></climb-log>
<div>
Although the indexing works fine and repeats as expected, the opacity of the delete button does not change upon hovering over it, contrary to the specifications in the jQuery function (which had previously worked before using the template).