Question

我需要元素（"block1"）停留在悬停状态。

我读到，使用javascript可能是可行的。但是我无法使其正常工作。

这是我的代码。

#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小提琴链接：https://jsfiddle.net/nav9xyhr/

Answer 1

您可以在鼠标悬停到block1上添加事件侦听器，并为block1设置固定的高度（在您的情况下为800px）。

var  block1 = document.getElementById('block1');
block1.addEventListener('mouseover', animateBox);
function animateBox(){
    block1.style.height = '800px';
}

更新了小提琴https://jsfiddle.net/nav9xyhr/4/

Answer 2

好吧，如果您想将其重叠在红色块上，可以使用z-index。

尝试一下

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>

Answer 3

如果您希望白色块在悬停后仍保持扩展状态（我从注释中收集），那么这是纯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>

诀窍是将从大到小的转换速度减慢到几乎觉察不到的速度（2147483648毫秒，或三个半星期），以便看起来什么都没有发生。
它不是完美的，但是您不需要JavaScript。

让我知道这是否是你所追求的；我可能误会了您的意图。

CSS过渡悬停

3 个答案: