Search code examples
htmlcsswebfrontendweb-frontend

The "hover" not work properly

I have a problem with div "transition"\"hover" at my project : Comverese.

At the section "SUCCESS STORIES" . when you hover the div's , it go up this o.k ,but not stay up when you move the mouse in that div.

What is the problem? 

.story1{
    position: absolute;
    width: 22rem;
    height: 12rem;
    z-index: 9;
    background: white;
    padding: 1rem;
    -webkit-transition:transform .6s ease-out;
    -moz-transition:transform .6s ease-out;
    -ms-transition:transform .6s ease-out;
    -o-transition:transform .6s ease-out;
    transition:transform .6s ease-out;
}

.story1:hover{
    -webkit-transform:translate(0px,-200px);
    -moz-transform:translate(0px,-200px);
    -ms-transform:translate(0px,-200px);
    -o-transform:translate(0px,-200px);
    transform:translate(0px,-200px);
}
Solution

  • The problem is that your div is not hovered anymore after it translates. The div moved up, and you're now hovering the div below (namely the .quote div) -> the story div comes back down.

    One way to fix this is to use a bit of javascript instead of solely relying upon CSS. Adding a specific class on mouseenter and removing it when you're leaving the div below.

    Something like the following (note that the JavaScript is a bit simple and should be improved upon to work for every story).

    CSS: 

    .story1.translated {
    -webkit-transform:translate(0px,-200px);
    -moz-transform:translate(0px,-200px);
    -ms-transform:translate(0px,-200px);
    -o-transform:translate(0px,-200px);
    transform:translate(0px,-200px);
}

    JS :

    var story1 = document.getElementsByClassName("story1")[0];    
var blockquote = document.getElementsByClassName("quote")[0];    
story1.addEventListener("mouseenter", function () {
    story1.className += " translated";
}
blockquote.addEventListener("mouseleave", function () {
    story1.className = story1.className.replace(" translated", "");
}

    Edit

    A pure CSS solution would be to move the :hover part to .story and style .story1 accordingly when it occurs. As follow:

    .story:hover .story1{
    -webkit-transform:translate(0px,-200px);
    -moz-transform:translate(0px,-200px);
    -ms-transform:translate(0px,-200px);
    -o-transform:translate(0px,-200px);
    transform:translate(0px,-200px);
}

    This seems to work just fine when I change it locally to try it on your site. And the same change can be applied to .float-icon:hover as well. Changing it to .story-icon:hover .float-icon works wonders