I created this simple html and CSS to show a hidden div on mouse hover over a button. Now I want add 2S delay to that hidden div after its display status change to Display block and before return to its original state which is display none on mouse out. Thanks. Here is my code,
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.content{
display: none;
}
.btn:hover + .content{
display: block;
}
</style>
</head>
<body>
<div>
<button type="button" class="btn">Hover Me</button>
<div class="content">
<h1>Hello</h1>
</div>
</div>
</body>
</html>
Use opacity and transition-duration :
use opacity to hide the division
and use transition-duration to set transition of 2 seconds
here is example: (RUN SNIPPET CODE)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.content{
background-color: #4CAF50; /* Green */
border: none;
color: white;
height: 90px;
width: 90px;
opacity: 0;
transition-duration: 2s;
}
.btn:hover + .content{
opacity: 1;
}
</style>
</head>
<body>
<button type="button" class="btn">Hover Me</button>
<div class="content">
</div>
</body>
</html>
How can I delay a :hover effect in CSS?
The attribute you are looking for is transition and transition-delay.
div{
transition: 0s background-color;
}
div:hover{
background-color:red;
transition-delay:1s;
}
Related
What I have
I applied transition style to rectangle, and I didn't add any hover state for that rectangle class. I saw a weird behaviour where the transition is being applied to that rectangle where it shade in for 3s when page refreshed.. even though there is no such hover states..?
see these images for clarification...,
enter image description hereenter image description here
why is this happening?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.rectangle {
width: 15rem;
height: 15rem;
background-color: #CD2227;
transition: all 3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>COCO COLA ART</title>
<link rel="stylesheet" href="cocoCola.css">
</head>
<body>
<div class="rectangle">
</div>
</body>
</html>
I'm getting a border-radius bug on the latest version of Chrome (working properly on Firefox) that lasts the time of an animation that uses opacity on a div from an HTML page [b. html] inserted in another HTML page [a. html] with object.
I tried other solutions (jQuery, Web Components...) without getting what I wanted and I honestly preferred to stay with object for this particular project even though it is an aging technology.
Screenshot
a.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<object id="b" data="b.html"></object>
</body>
</html>
b.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>Hi, how are you?</div>
</body>
</html>
style.css
* { margin: 0; padding: 0; }
body { background: blue; }
#b {
width: 400px;
height: 400px;
border: 10px solid black;
border-radius: 40px;
overflow: hidden;
}
div {
height: 400px;
background: white;
text-align: center;
animation: ani 2s forwards;
}
#keyframes ani {
0% { opacity: 0; }
100% { opacity: 1; }
}
Thanks for your help!
Just as example, here is the jQuery version I found [a.html]
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#b").load("b.html");
});
</script>
</head>
<body>
<div id="b"></div>
</body>
</html>
I have this really weird problem. I just want to draw two simple lines that are a little bit spaced out between one another.
Here's the html:
<div class="hline">
</div>
<div class="hline">
</div>
And the CSS:
html, body {
background-color: white;
}
.hline {
background-color: black;
height: 2px;
margin: 50px;
}
When the background color is of the body is white, it works flawlessly, but when it's black, and the background color of my divs is white, there just seems to be one big white line in the black background. Why is that?
Thanks a lot in advance,
Luke :D
it's working for me
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
background-color: black;
}
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline">
</div>
<div class="hline">
</div>
</body>
</html>
I tried your code and this is what I got for a black background and a white line
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { background-color: black; }
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline"></div><div class="hline"></div>
</body>
</html>
I want to show hover style but in the output nothing is showing
This is my html page
<html>
<head>
<style rel="spreadsheet" type="text/css" src="hover_check.css">
<title>hover effect</title>
<head>
<body>
<div class="hover">
<img src="java3.jpg">
<div class="image">
Full Image
</div>
</div>
</body>
</html>
And my css file is as follows
.hover .image {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
}
.hover a.info {
position:relative;
top:-10px; /* Center the link */
opacity: 0;
transition: opacity 0.5s 0s ease-in-out;
}
.hover:hover .image {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.hover:hover a.image {
opacity:1;
transition-delay: 0.3s;
}
img {
height:60px;
width:60px;
}
If I remove my css link from the html page then my image was visible.
The thing that causing problem => <style rel="spreadsheet" type="text/css" src="hover_check.css">
Rewrite this line as: <link rel="stylesheet" type="text/css" src="hover_check.css" />, the styles will start working. Also close the <head> tag properly.
The final code should look like:
<html>
<head>
<link rel="stylesheet" type="text/css" src="hover_check.css" />
<title>hover effect</title>
</head>
<body>
<div class="hover">
<img src="java3.jpg">
<div class="image">
Full Image
</div>
</div>
</body>
</html>
Cheers!
Try to close the <head> tag, you have open it two times ;)
Also, I think the correct markup to link a stylesheet is:<link rel="stylesheet".... not <style rel="...
W3C validator
Here is a useful tool to validate your html, some errors come often from an incorrect markup. This tool alerts you that errors.
Add head tag with link tag instead of style tag. Please check the code.
<head>
<link rel="stylesheet" type="text/css" href="../StyleSheet.css" />
<title>hover effect</title>
</head>
<body>
<div class="hover">
<img src="java3.jpg">
<div class="image">
Full Image
</div>
</div>
</body>
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.