Grow your CSS skills. Land your dream job.

On mouse over change transition

  • # May 2, 2013 at 8:15 pm

    Here i am implementing an Image slider

    My problem is when i hover my image slider i want to stop my css transition property.
    I tried using addclass and removeclass but failed
    Here is my code

    **HTML**


    **CSS**

    #slider
    {
    overflow:hidden;
    height:363px;
    position:absolute;
    left:180px;
    top:159px;
    padding:0px;
    margin:0px;
    background: url(“header_bg.jpg”) repeat-x scroll 0 0 #FFFFFF;
    width:1000px;
    }
    #slide1
    {
    position:absolute;
    left:0px;
    z-index:1;

    }
    .slide
    {
    position:absolute;
    left:1000px;
    }
    .transition
    {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    }
    .notransition
    {
    -webkit-transition: none;
    transition: none;
    }
    #right
    {
    position:absolute;
    top: 287.5px;
    right: 127px;
    z-index: 99;
    }
    #left
    {
    position:absolute;
    top: 287.5px;
    left: 127px;
    z-index: 99;
    }

    **Script**

    var t=setInterval(function(){$(“#right”).click()},5000);

    $(document).ready(function()
    {
    var present=1;
    var next=2;
    var total_slide=document.getElementById(“slider”).childElementCount;

    $(“#right”).click(function()
    {

    present_slide=”#slide”+present;
    next_slide=”#slide”+next;
    $(present_slide).css(“left”,”1000px”);
    $(next_slide).css(“left”,”0px”);
    present++;
    next++;
    if(present==(total_slide+1))
    {
    present=1;
    next=2;
    for(i=1;i< =total_slide;i++)
    {
    $(“#slide”+i).css(“left”,”1000px”);
    }
    $(“#slide1″).css(“left”,”0px”);
    }

    });

    $(“#left”).click(function()
    {
    if(present==1)
    {
    next_slide=”#slide”+total_slide;
    present_slide=”#slide”+present;
    $(present_slide).css(“left”,”1000px”);
    $(next_slide).css(“left”,”0px”);

    present=total_slide;
    next=1;
    }else
    {
    next_slide=”#slide”+(present-1);
    present_slide=”#slide”+present;
    $(present_slide).css(“left”,”1000px”);
    $(next_slide).css(“left”,”0px”);
    present–;
    next–;
    }
    if(next==0)
    {
    present=(total_slide-1);
    next=total_slide;

    }
    });

    $(“.slide”).on(‘mouseenter’,function()
    { $(this).removeClass(‘transition’).addClass(‘notransition’);});
    $(“.slide”).on(‘mouseleave’,function()

    {$(this).removeClass(‘notransition’).addClass(‘transition’);});
    });

    In the above provided code i used to classes transition and no transition.

    I also tried with CSS as follows

    .slide:hover
    {
    -webkit-transition: none;
    transition: none;
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".