0

I have 2 images rotate 10 degree initially. When mouse hovers 1st image, its rotation become 0 degree, and also the image increase by 1.05. 2nd image size increase 1.05 when hovering.

This can be achieved by pure css.

But I want to do it in JS. The problem: 1st image does not rotate anymore.

Where is the problem?

HTML file

<div class="myclass" id="my1">
  <a href="" title="">
    <img src="data:image/png;base64, ...">
  </a>
</div>

<div class="myclass" id="my2">
  <a href="" title="">
    <img src="data:image/png;base64, ...">
  </a>
</div>

1) Works. Rotation is achieved by pure css file

css file

.myclass a {
  -webkit-transform: rotate(0deg); 
  -webkit-transition: -webkit-transform .15s linear; 
  -moz-transform: rotate(0deg); 
}

.myclass:nth-child(1n) a { 
  -webkit-transform: rotate(10deg); 
  -moz-transform: rotate(10deg); 
}

.myclass a:hover { 
  -webkit-transform: scale(1.05); 
  -moz-transform: scale(1.05); 
  position: relative; 
  z-index: 5; 
}

2) Not work. Rotation is achieved by JS

css file

.myclass a {
  -webkit-transform: rotate(0deg); 
  -webkit-transition: -webkit-transform .15s linear; 
  -moz-transform: rotate(0deg); 
}

.myclass a:hover { 
  -webkit-transform: scale(1.05); 
  -moz-transform: scale(1.05); 
}

javascript file

// To initialize image with 10 degree rotation
$selector = $('#my1').find('a');
$selector.css({'-webkit-transform': 'rotate(10deg)',
                   '-moz-transform': 'rotate(10deg)'});
user3792705
  • 577
  • 3
  • 18
  • first you can get rid of all the vendor prefixes (-webkit and -moz) they no more needed for transform and transition – Temani Afif Jul 23 '19 at 21:04
  • and don't start ID with numbers, it's valid but you may get some surprise – Temani Afif Jul 23 '19 at 21:05
  • Change to $('#1').css({'transform': 'rotate(10deg)'})? I just tried. Seem (real code is little more complex) not work. – user3792705 Jul 23 '19 at 21:08
  • not only the JS, you need to remove the prefixes from everywhere. It's not the cause of your issue but it's not needed – Temani Afif Jul 23 '19 at 21:11
  • Hover will fall back to original degree in css .myclass a {..}, right? Also tried $('#1').css({'-transform': 'rotate(10deg)'}). Not work. – user3792705 Jul 23 '19 at 21:12
  • Keep the prefixes will have better browser backward compatibility? Without removing it, css works perfectly. Why does Jquery css replace will change the behavior? – user3792705 Jul 23 '19 at 21:25
  • check this: https://caniuse.com/#feat=transforms2d .. prefixes are needed for FF version <15 and for Chrome version <35 ..actually we are at 68 and 75 so you will have 0.0001% of people using very very old Firefox or Chrome and I am pretty sure no one are using them. – Temani Afif Jul 23 '19 at 21:30
  • and with jQuery you are target the div not the `a` – Temani Afif Jul 23 '19 at 21:31
  • I corrected the post. $selector = $('#my1').find('a'); – user3792705 Jul 23 '19 at 21:36
  • jquery add inline style that you cannot override with :hover, it's more specific and will always win – Temani Afif Jul 23 '19 at 21:38
  • Can you be more specific? Sounds like Jquery adds something that won't work. What will work? – user3792705 Jul 23 '19 at 21:41
  • inspect the code and you will see that jQuery add styles as inline which is different from having the style inside the CSS file. Check the duplicate link to understand what does *specificity* mean and why using inline style (added with jquery) is an issue here – Temani Afif Jul 23 '19 at 21:43
  • Conclusion: jquery won't work in this case? Is there alternative? – user3792705 Jul 24 '19 at 00:08

0 Answers0