jquery之将鼠标悬停在 DIV 上以展开宽度

JustinYoung 阅读：538 2023-11-05 18:46:41 评论：0

这是我目前所拥有的 - https://jsfiddle.net/8216Lntb/

body { 
  background-color: black; 
  margin: 0 auto; 
  height: 100%; 
  width: 100%; 
} 
.grow { 
  height: 100vw; 
  /* Origional height */ 
  width: 25%; 
  /* Origional width */ 
  margin: 0px 0 0px 0; 
  /* Just for presentation (Not required) */ 
  float: left; 
  /* Just for presentation (Not required) */ 
  position: relative; 
  /* Just for presentation (Not required) */ 
  transition: height 0.5s; 
  /* Animation time */ 
  -webkit-transition: height 0.5s; 
  /* For Safari */ 
} 
.grow:hover { 
  width: 25%; 
  /* This is the height on hover */ 
}

<html> 
 
<head> 
  <title>HOMEPAGE</title> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" /> 
</head> 
 
<body> 
  <div class="grow" style="background-color:#2A75A9;"></div> 
  <div class="grow" style="background-color:#274257;"></div> 
  <div class="grow" style="background-color:#644436;"></div> 
  <div class="grow" style="background-color:#8F6048;"></div> 
  <!--<div class="grow" style="background-color:red;"></div>--> 
</body> 
 
</html>

我想要实现的是这个 https://artsandculture.withgoogle.com/en-us/national-parks-service/parks

每次我将鼠标悬停在一个 div 上时，它都会从页面上删除一个，因为它已经超过 100%。

我的问题是我该怎么做才能让一个 div 展开时其他的 div 变小，所以它们都停留在一页上

请您参考如下方法:

I think that you don't need javascript for this.

html,body{ 
	margin: 0 auto; 
	height: 100%; 
	width: 100%; 
} 
body { 
	background-color: black; 
} 
#growContainer{ 
	display: table; 
	width:100%; 
	height:100%; 
} 
.grow{ 
	display: table-cell; 
	height:100%; 
	width: 25%; 
	-webkit-transition:width 500ms; 
	-moz-transition:width 500ms; 
	transition:width 500ms; 
} 
#growContainer:hover .grow{ 
	width:20%; 
} 
#growContainer:hover .grow:hover { 
	width:40%; 
}

<div id="growContainer"> 
<div class="grow" style="background-color:#2A75A9;"></div> 
<div class="grow" style="background-color:#274257;"></div> 
<div class="grow" style="background-color:#644436;"></div> 
<div class="grow" style="background-color:#8F6048;"></div> 
</div>

标签:jquery

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。