CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Lance Bitner
Lance Bitner

Reputation: 356

Convert CSS to a different format (JavaScript/jQuery)

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?

Upvotes: 0

Views: 62

Answers (1)

PVL
PVL

Reputation: 587

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()

Upvotes: 1

Related Questions