pull from html5 data

by mrjordy

HTML

<a href="#" class="cexButton" id="cexButtonOne" data-options='{"spin":"-90deg"}'>1</a>
<a href="#" class="cexButton" id="cexButtonTwo" data-options='{"spin":"-45deg"}'>2</a>
<a href="#" class="cexButton" id="cexButtonThree" data-options='{"spin":"0deg"}'>3</a>
<a href="#" class="cexButton" id="cexButtonFour" data-options='{"spin":"45deg"}'>4</a>
<a href="#" class="cexButton" id="cexButtonFive" data-options='{"spin":"90deg"}'>5</a>
<a href="#" class="cexButton" id="cexButtonSix" data-options='{"spin":"135deg"}'>6</a>
<div class="CexStarContainer">
<img src="https://navy.deps.mil/peoeis/sites/nen/res/CEX_Star.svg">
</div>

CSS

#layer1 {
  opacity: .2;
  transform-origin: 10.9px;
}

JavaScript

/*$('#cexButton_-90deg').mouseover(function() {
  $('#layer1').css({'transform': 'rotate(-90deg)'});
});
$('#cexButton02').mouseover(function() {
  $('#layer1').css({'transform': 'rotate(-45deg)'});
});
$('#cexButton04').mouseover(function() {
  $('#layer1').css({'transform': 'rotate(45deg)'});
});
$('#cexButton05').mouseover(function() {
  $('#layer1').css({'transform': 'rotate(90deg)'});
});
$('#cexButton06').mouseover(function() {
  $('#layer1').css({'transform': 'rotate(135deg)'});
});
$(".cexButton").mouseleave(function() {
  $('#layer1').css({'transform': 'rotate(0)'});
});*/

$(function() {
    $(".cexButton").mouseover(function(event) {
        var options = $(this).data("options");
 //     console.log(options.spin);
        $('#layer1').css({'transform': "rotate("+options.spin+")"});
    });
});