CSS :hover activates only when the mouse is in motion

Looking at a simple example I put together:

HTML

<div id="sample"></div>

CSS

#sample {
    width:400px;
    height:400px;
    background-color:green;
    display:none;
}

#sample:hover{
   background-color:red;
}

It's a hidden DIV that changes color on hover.

After 2 seconds, JavaScript reveals it:

setTimeout(function() {
     document.getElementById('sample').style.display="block";
},2000)

If the mouse is over the area where the DIV will appear before it does so, it won't show the hover effect until you move the mouse. See a demo here.

Is this intentional? Is there a way to detect if the DIV is hovered without using JS?

javascriptcsshoverstyles

Answer №1

Although the opacity property can be used, as mentioned by @BrianPhillips, it may not function properly in IE 8. If you're looking for a workaround that involves Javascript, here's a concise solution:

window.onmousemove=function(event){
    ev = event || window.event;
    if (event.pageX <= 400 && event.pageY <= 400){
        document.getElementById('bla').style.backgroundColor= "red";
    } else {
        document.getElementById('bla').style.backgroundColor= "green";
    }
}
setTimeout(function() {
     document.getElementById('bla').style.display="block";
},2000)

Check out the demo here

Answer №2

By setting the display to none, you are essentially removing the image from the layout, which means there is no area to hover over.

To work around this issue, you can set the background-image in your CSS to rgba(0 0 0 0); This will make the image invisible while still maintaining its presence in the DOM. You can then update your JavaScript code to:

setTimeout(function() {
     document.getElementById('bla').style.backgroundColor="green";
},2000);

Check out this JSFiddle for reference.

Answer №3

If you want to control the visibility of an element without affecting the flow of the page, one option is to use CSS opacity and set the position to absolute. This method seems to be effective:

CSS:

#example {
    width:250px;
    height:250px;
    background-color:blue;
    opacity: 0;
    position: absolute;
}

JS:

setTimeout(function() {
         document.getElementById('example').style.opacity="1";
         document.getElementById('example').style.position="relative";
},2000)

Demo

It's worth noting that using opacity allows elements to respond to events like click or hover, unlike elements with visibility: hidden or display:none. (source)

Keep in mind that opacity may not be supported in IE 8 and earlier versions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Enhance Image with a Fresh Hue`

Let me explain my dilemma: I'm dealing with a two-tone png image - one tone is black and the other is transparent. Right now, I'm relying on the background color attribute to dynamically change the color of the transparent section. However, I ...

javascriptcsshtml

I'm having difficulty implementing a vue-awesome icon on my project

I am attempting to utilize the standard window-close icon from vue-awesome. I have imported my vue-awesome using the following code: import 'vue-awesome/icons'; import Icon from 'vue-awesome/components/Icon.vue'; Vue.component('i ...

javascriptvue.js

Communication between a directive controller and a service via an HTTP call

I'm currently developing an Angular directive that loads a Highchart.js area graph by passing some variables to it. Here's how I am using the directive: <andamento-fondo-area-chart color="#3FAE2A" url="../data.json"></andamento-fondo-a ...

javascriptangularjshighcharts

The Discord.js guildMemberUpdate event: Everything you need to know

I am currently working on creating a welcome message bot using Discord.js. The goal is to have the bot send a welcome message through a webhook in a specific channel when a member gains access to it. Here's what I have so far: client.on("guildMe ...

javascriptnode.jsdiscorddiscord.jsbots

Filter JavaScript elements by conditions and true/false values

I can't quite recall the answer to this at the moment. Consider an array of Vendors (this is just placeholder data): [ { "user_updated": null, "user_created": "128a84b5-275c-4f00-942e-e8ba6d85c60e", "d ...

javascriptvue.js

Center the element vertically if its height is less than the container's height, but let its height become 100% if the container's height is

I am trying to achieve a layout where an element (.figure) is centered horizontally when it is shorter than its container (.timeline-content), but matches the height of its container when longer. The height of the container changes based on its parent. T ...

cssflexboxvertical-alignment

When the user signs in with Next-auth, they will be redirected to /signin with

After following the documentation to implement next-auth, I encountered an issue. When I visit http://localhost:3001/api/auth/signin, I see a page with a link (https://i.stack.imgur.com/xb0fx.png) but clicking "signin with Google or GitHub" just refreshes ...

javascriptreactjsnext.jsnext-auth

Seamless scrolling experience achieved after implementing a header that appears when scrolling up

My goal is to create a header with the following functionalities: Initially displays with a transparent background Upon scrolling down the page by 25px, it will dynamically add the header--maroon class to the header, which alters the background color and ...

javascriptjqueryhtmlcss

Utilize AJAX and JavaScript to retrieve file information and facilitate file downloads

I have developed a script that intercepts Captcha form submissions. Typically, when the form is submitted, a file will be downloaded (such as exe or zip) in the usual way where it appears at the bottom of the Chrome browser and gets stored in the "download ...

javascriptajax

Changing the color of HTML text based on a variable in Vue JS can be achieved by altering the CSS styles dynamically

I have developed a website that shows values with a set threshold. I now want to change the color of the values when they exceed the threshold, but I am unsure of how to proceed. I want to display consultation.indicateurs.TRS in red when it exceeds the va ...

javascripthtmlvue.js

Smooth Div Scroll experiencing display issues

Trying to integrate the smooth div scroll, specifically the "Clickable Logo Parade" found at: Successfully implemented it on a blank page exactly as desired, but encountering issues when inserting it into the current layout. Could something be causing int ...

javascriptjqueryajax

Dividing the text by its position value and adding it to a fresh object

I needed to divide the paragraph into sections based on its entityRanges. Here is what the original paragraph looks like: { type: 'paragraph', depth: 1, text: 'Do you have questions or comments and do you wish to contact ABC? P ...

javascriptarraystypescriptlodash

What is the best way to toggle a specific div element within an ng-repeat loop?

I have a list of products. When I click on a product, it should be added to the database. If I click on the same product again, it should be removed from the database. I am toggling the wishlistFlag using ng-click. This works correctly for one div element, ...

javascripthtmlcssangularjs

Avoiding page refresh while submitting a form can be tricky, as both e.preventDefault() and using a hidden iFrame seem

I've been stuck on this issue for a while now, scouring Stack Overflow and Google for solutions, but nothing seems to be working. My main goal is to avoid page reloads after uploading a file because it resets the dynamic HTML I need to display afterwa ...

javascripthtml

Calculate the total rows within a specified date range

Within my database, there is a column named IsStaff, which returns a value as a bit. This signifies whether a staff member in a company has an illness (1) or not (0). How can I construct an SQL query to count the occurrences of both 1's and 0's w ...

c#javascriptjquerysql

Issues with the execution of Typescript decorator method

Currently, I'm enrolled in the Mosh TypeScript course and came across a problem while working on the code. I noticed that the code worked perfectly in Mosh's video tutorial but when I tried it on my own PC and in an online playground, it didn&apo ...

javascripttypescriptvisual-studio-codemethodsoutput

React component closes onBlur event when clicked inside

I recently developed a React component using Material UI which looks like the code snippet below: <Popper open={open} anchorEl={anchorRef.current} onBlur={handleToggle} transition disablePortal > <MenuList autoFocusItem={open}> ...

javascriptreactjsmaterial-ui

Error: The function res.json is not recognized. Despite searching through related inquiries, I cannot find a solution to my specific issue

Struggling to find a solution and avoiding repetitive questions, I am facing an issue with my bug tracker. After submitting the form and sending it to the server side, the bug is created in the database. However, when I save the bug using await bug.save() ...

javascriptnode.jsexpressfetch-api

Tips on providing an input value within a selection option

My issue arises when selecting the "Other" option and entering text values, only 'other' is printed instead of my inputted text value. How can I resolve this? <FormItem {...formItemLayout} label="Relation :" > ...

javascriptreactjs

Combining jQuery dataTables and Codeigniter for dynamic rendering using sAjaxSource

I am currently facing an issue while working with dataTables in Codeigniter. I keep encountering the following error message: array_push() expects parameter 1 to be array, null given The resulting output is {"aaData":null} My desired outcome should look ...

javascriptjquerycodeigniterdatatables