CSS 过渡悬停
[英]CSS transition hover
问题描述
I need the element ( "block1" ) to stay fixed on hover.
我需要元素（ "block1" ）在悬停时保持固定。
I read that this might be possible using javascript.我读到这可能使用 javascript 实现。 But I couldn't make it work.但我无法让它发挥作用。
Here's my code.这是我的代码。
#block1 { display: block; width: 60px; height: 200px; background-color: #fff; margin: 0 auto; -webkit-transition: 2s; /* For Safari 3.1 to 6.0 */ transition: 2s; } #block1:hover { height: 800px; } body { font: 20px/1.1em arial, sans-serif; background: lightgray; } #container1 { margin: 0 auto; width: 600px; height: 1000px; background-color: #f0dcbe; z-index: 0; position: relative; } #container2 { position: absolute; width: 400px; height: 800px; top: 100px; left: 100px; z-index: 2; } #block2 { position: absolute; width: 400px; height: 60px; background-color: #c80000; bottom: 60px; } #line1 { position: absolute; border: 1px solid #000; width: 400px; height: 1px; margin: 0 auto; bottom: 270px; transform: rotate(-10deg); transform-origin: 20% 40%; }
<div id="container1"> <div id="container2"> <div id="block1"></div> <div id="block2"></div> <div id="line1"></div> <div id="line2"></div> </div> </div>
Js fiddle link: https://jsfiddle.net/nav9xyhr/ js小提琴链接： https : //jsfiddle.net/nav9xyhr/
3 个解决方案
解决方案1
2 2019-01-02 04:54:31
You can add an event listener on mouseover to block1 and give the fixed height(800px in your case) for block1.您可以在鼠标悬停时将事件侦听器添加到 block1，并为 block1 提供固定高度（在您的情况下为 800px）。
var block1 = document.getElementById('block1');
block1.addEventListener('mouseover', animateBox);
function animateBox(){
block1.style.height = '800px';
}
updated fiddle https://jsfiddle.net/nav9xyhr/4/更新小提琴https://jsfiddle.net/nav9xyhr/4/
解决方案2
1 2019-01-02 04:54:45
Well, you can use z-index if you want to overlap it over the red block.好吧，如果您想将其重叠在红色块上，则可以使用z-index 。
Try this尝试这个
body{ font:20px/1.1em arial, sans-serif; background:lightgray; } #container1{ margin: 0 auto; width: 600px; height: 1000px; background-color: #f0dcbe; z-index: 0; position: relative; } #container2 { position: absolute; width: 400px; height: 800px; top: 100px; left: 100px; z-index:2; } #block1 { display: block; width: 60px; height: 200px; background-color: #fff; margin: 0 auto; -webkit-transition: 2s; /* For Safari 3.1 to 6.0 */ transition: 2s; z-index:1; } #block1:hover { height: 800px; } #block2 { position: absolute; width: 400px; height: 60px; background-color: #c80000; bottom:60px; z-index:-1; } #line1 { position:absolute; border: 1px solid #000; width: 400px; height: 1px; margin: 0 auto; bottom: 270px; transform: rotate(-10deg); transform-origin: 20% 40%; }
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>constructivism</title> <!-- <meta name="description" content="" /> <link rel="icon" type="image/png" href="favicon.png"> <meta property="og:title" content="constructivism" /> <meta property="og:image" content="http://" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="constructivism" /> <meta name="twitter:image" content="http://" /> <meta name="twitter:description" content="" /> --> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <body> <div id="container1"> <div id="container2"> <div id="block1"></div> <div id="block2"></div> <div id="line1"></div> <div id="line2"></div> </div> </div> </body> </html>
解决方案3
0 2019-01-02 09:41:17
If you want the white block to stay expanded after hovering (which I gathered from the comments) then here is a trick in pure CSS that comes very close.如果您希望白色块在悬停后保持展开状态（这是我从评论中收集的），那么这里有一个非常接近的纯 CSS 技巧。
#block1 { display: block; width: 60px; height: 200px; background-color: #fff; margin: 0 auto; -webkit-transition: 2s; /* For Safari 3.1 to 6.0 */ transition: 2147483s; /* very slow transition */ } #block1:hover { height: 800px; transition: 2s; } body { font: 20px/1.1em arial, sans-serif; background: lightgray; } #container1 { margin: 0 auto; width: 600px; height: 1000px; background-color: #f0dcbe; z-index: 0; position: relative; } #container2 { position: absolute; width: 400px; height: 800px; top: 100px; left: 100px; z-index: 2; } #block2 { position: absolute; width: 400px; height: 60px; background-color: #c80000; bottom: 60px; } #line1 { position: absolute; border: 1px solid #000; width: 400px; height: 1px; margin: 0 auto; bottom: 270px; transform: rotate(-10deg); transform-origin: 20% 40%; }
<div id="container1"> <div id="container2"> <div id="block1"></div> <div id="block2"></div> <div id="line1"></div> <div id="line2"></div> </div> </div>
The trick is to slow down the transition from large to small to an almost imperceptible rate (2147483648ms, or three and a half weeks) so that it looks as if nothing happens.诀窍是将从大到小的过渡减慢到几乎无法察觉的速度（2147483648 毫秒，或三个半星期），使其看起来好像什么也没发生。
It's not perfect, but you won't need JavaScript.它并不完美，但您不需要 JavaScript。
Let me know if this was what you were after;让我知道这是否是您所追求的； I may have got your intentions wrong.我可能误解了你的意图。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.