Greetings! I am working with the following piece of code:
html:
<div class="portlet-titlebar"
ng-click="toggleCollapsed(portlet, $event)"
ng-class="{current: hover}"
ng-init="hover = false"
ng-mouseenter="hover = hoverIn()"
ng-mouseleave="hover = false">
<span class="arrow">
<svg height="20" viewBox="0 0 32 32" width="20"><path d="M16.7 11.3c-0.4-0.4-1-0.4-1.4 0l-9 9c-0.4 0.4-0.4 1 0 1.4 0.4 0.4 1 0.4 1.4 0L16 13.4l8.3 8.3c0.4 0.4 1 0.4 1.4 0 0.4-0.4 0.4-1 0-1.4L16.7 11.3z" fill="#121313"/></svg>
</span>
<span class="titlebar-text" title="{{portlet.title}}">{{portlet.title}}</span>
</div>
within the angularJS directive:
scope.hoverIn = function(){
if(event.ctrlKey){
return true;
}
return false;
}
I am using less for styling, so in my less file there is:
.current{
border: 1px solid red;
}
My objective is to change the span class="arrow" icon to another icon on mouseover with control key pressed, and then trigger another function when clicking on the icon while still holding ctrl. Can anyone suggest the best way to achieve this? I attempted to handle the hover like this, but it did not work as expected:
document.element.getElementsByClassName('portlet-titlebar').hover(function () {
$(this).toggleClass('current');
});
$(document).keypress(function (e) {
if (e.which == 17) {
$('.current').remove();
}
});
Unfortunately, it seems that the above code does not function properly...