CODEWITHSUNDEEP
htmlcss
Omer Aviv
Omer Aviv

Reputation: 284

Make a div to disappear on hover

I'm trying to make a div disappear on hover with CSS but I don't want it reappearing when moving the mouse again. I know I can do it with Javascript like this:

function CloseRegister() {
    var regdiv = document.getElementById("register");
    register.style.display = "none";
}

But I want it to have CSS transitions so it loses it takes like 2 seconds to disappear (without reappearing again)..

This is what I've tried so far:

<style type="text/css">
.register
{
    background-color:Purple;
    transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
}
.register:hover
{
    opacity:0;
}
</style>

<div id="register" class="register" style="position:fixed; width:50%; height:50%; top:25%; left:25%;"></div>

EDIT:

Fixed it with @GolezTrol's help:

function CloseRegister() {
    var regdiv = document.getElementById("register");
    register.onmouseup = function () {
        register.onmouseup = null;
        register.classList.add('hovered');
        setTimeout(function () { register.style.display = 'none'; }, 2000);
    }
}
.register
{
    background-color:Purple;
    transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
}
.register.hovered
{
    background-color:transparent;
}
<div onmousedown="CloseRegister()" id="register" class="register" style="position:fixed; width:50%; height:50%; top:25%; left:25%;"></div>

Upvotes: 1

Views: 1433

Answers (4)

sbatson5
sbatson5

Reputation: 648

Misunderstood with first post. This has the same result with CSS3 animations, but won't be supported in older versions of IE.

.register
{
    background-color:Purple; 
}
.hovered-anim
{
    animation-name: example;
    animation-duration: 2s;
    -webkit-animation-delay: 0s !important;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards;
}
@keyframes example {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes example {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

jQuery:

 $(".register").hover(function(){ 
    $(this).addClass("hovered-anim");
});

You can view the fiddle here:

https://jsfiddle.net/tc78axye/2/

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

the best approach is to listen to the transitionend and remove

$("#register").hover(function(){ 
  $(this).addClass("delete");
  $(this,".delete").on('transitionend webkitTransitionEnd oTransitionEnd', function () {
    $(this).remove()
 });
})
.register
{
    background-color:Purple;
    transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
}
.register.delete
{
    opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="register" class="register" style="position:fixed; width:50%; height:50%; top:25%; left:25%;"></div>

Upvotes: 1

TorKitten
TorKitten

Reputation: 16

You could also set 

 .register:hover {
 opacity:0
 }

to display:none or visibility:hidden; if you want to keep the layout without using JavaScript

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116180

If you are using JavaScript anyway, you can use the onmouseover event. When that event occurs for the first time, you can add a class that runs the CSS transformation.

var regdiv = document.getElementById("register");

var hoverEvent = function(){
    // Remove the event so it doesn't get called a million times while fading.
    register.removeEventListener('mouseover', hoverEvent);
    // Add the class that takes care of the animation.
    register.classList.add('hovered');
  
    // After a while, still add 'display: none' to remove the element from flow, if needed.
    setTimeout(2000, function(){register.style.display = 'none';})
};

register.addEventListener('mouseover', hoverEvent);
.register
{
    background-color:Purple;
    transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
}
.register.hovered
{
    opacity:0;
}
<div id="register" class="register" style="position:fixed; width:50%; height:50%; top:25%; left:25%;"></div>

Upvotes: 4

Related Questions