Convert CSS to a different format (JavaScript/jQuery)

Question

I have a Hover effect that is not working well with my jQuery card (card found on http://www.creative-tim.com/product/rotating-css-card?page=3).

The Hover effect in CSS is causing glitches when I merge it with my jQuery cards in Internet Explorer. I like the action, but it does strange things. It's not merging well with the jQuery cards. The only solution I can think of is converting the action of the code into something like JavaScript or jQuery. Below is the hover CSS code:

.card:hover{
-moz-transform: perspective(3000px) rotateY(-30deg) translateX(15px);
-ms-transform: perspective(3000px) rotateY(-30deg) translateX(15px);
-o-transform: perspective(3000px) rotateY(-30deg) translateX(15px);
-webkit-transform: perspective(3000px) rotateY(-30deg) translateX(15px)  translateZ(200px) scale(0.8);
transform: perspective(3000px) rotateY(-30deg) translateX(15px);}

How can I convert this CSS action that I want into a different language? Something that works well with my jQuery cards?

PVL · Accepted Answer · 2016-03-06 22:20:46Z

1

This might help. This is jQuery

$(function(){

    $(".yourClassOfHoverStuffOrWhatEverYouCallIt").hover(
     function () {
      $(this).addClass("hover");
     },
     function () {
      $(this).removeClass("hover");
    }); 
}

Futher if you want to animate look up .animate()

answered Mar 6, 2016 at 22:20

PVL

5871 gold badge3 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Convert CSS to a different format (JavaScript/jQuery)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related