Create a div that vanishes when hovered over

Question

Create a div that vanishes when hovered over

I want to create a div element that disappears on hover using CSS without reappearing when moving the mouse again. While I know this can be achieved using JavaScript, I'm looking for a solution that incorporates CSS transitions for a smoother effect:

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

I have been experimenting with CSS transitions and here is what I have 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:

I was able to resolve the issue with the help of @GolezTrol:

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>

html css

Answer 1

Answer №1

If you are utilizing JavaScript in your project, consider using the onmouseover event. By triggering this event for the first time, you can incorporate a class that activates a CSS transformation effect.

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

var hoverEvent = function(){
    // Remove the event listener to prevent multiple calls during the animation.
    register.removeEventListener('mouseover', hoverEvent);
    // Apply the class responsible for the desired animation.
    register.classList.add('hovered');
    
    // Optionally, hide the element from view after a set duration.
    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>

Answer 2

If you are utilizing JavaScript in your project, consider using the onmouseover event. By triggering this event for the first time, you can incorporate a class that activates a CSS transformation effect.

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

var hoverEvent = function(){
    // Remove the event listener to prevent multiple calls during the animation.
    register.removeEventListener('mouseover', hoverEvent);
    // Apply the class responsible for the desired animation.
    register.classList.add('hovered');
    
    // Optionally, hide the element from view after a set duration.
    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>

Answer 3

Answer №2

One effective strategy is to pay close attention to the transitionend event and utilize the remove method

$("#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>

Answer 4

One effective strategy is to pay close attention to the transitionend event and utilize the remove method

$("#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>

Answer 5

Answer №3

Another option is to adjust the following CSS code:

.register:hover {
opacity: 0;
}

You can also try changing it to display:none; or visibility:hidden; if you prefer not to use JavaScript to maintain the layout.

Answer 6

Another option is to adjust the following CSS code:

.register:hover {
opacity: 0;
}

You can also try changing it to display:none; or visibility:hidden; if you prefer not to use JavaScript to maintain the layout.

Answer 7

Answer №4

Initially misunderstood with the initial post. This method yields the same outcome using CSS3 animations, however, it may not be compatible with older versions of Internet Explorer.

.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");
});

For reference, you can access the fiddle via the following link:

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

Answer 8

Initially misunderstood with the initial post. This method yields the same outcome using CSS3 animations, however, it may not be compatible with older versions of Internet Explorer.

.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");
});

For reference, you can access the fiddle via the following link:

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

Create a div that vanishes when hovered over

EDIT:

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can I inspect the HTML source of GWT?

Using Bootstrap and CSS to style a div element and fill it

Avoiding the appearance of a scrollbar when content extends beyond its containing block

Prevent Bootstrap 5 input fields from automatically adjusting to the height of a CSS grid cell

How can I incorporate dashed borders between images using CSS?

Modify table row background color using PHP based on its position in the table with the use of a function

The Bootstrap DateTimePicker is displaying on the screen in an inaccurate

PHP Linking Style Sheets

jQuery is great at adding a class, but struggles to remove it

How can I extract text from a website without retaining number, dot, and alphabet bullets in the list?

When floating divs with varying heights are wrapped, they may become stuck in place

decorating elements in a line with colored backgrounds

Apply a coating of white paint and add color to the border

When using onclick="location.href='page.html'", the page fails to load on Safari browser

Creating a Bootstrap 4 DIV element with horizontal scrolling functionality

Is it possible to adjust table rows to match the height of the tallest row in the table?

How can we integrate this icon/font plugin in CSS/JavaScript?

What is the best way to achieve this Bootstrap design without copying the content?

What is the best way to create a single HTML file that can showcase several different pages?

Learn how to apply CSS styles from one component to another in Angular