个人中心
gpt4 book ai didi

html - CSS3 悬停显示 div

转载 作者：太空宇宙 更新时间：2023-11-04 11:03:52 25 4
gpt4 key购买 nike

当用户将鼠标悬停在 div 元素上时，我试图实现这一点:

enter image description here

当我将鼠标悬停在该元素上时，没有任何反应，有人可以帮我解决这个问题吗？

这是我的标记和 SASS:

.birmingham-venue
	background-image: url(/assets/img/birmingham.png)
	background-repeat: no-repeat
	background-size: cover
	padding-bottom: 200px
	padding-left: 0
	padding-right: 0
	margin: 0

	h2 
		margin: 0
		color: #fff
		position: absolute
		bottom: 0
		right: 0
		padding-right: 20px
		padding-bottom: 10px

.leeds-venue
	background-image: url(/assets/img/leeds.png)
	background-repeat: no-repeat
	background-size: cover
	padding-bottom: 200px
	padding-left: 0
	padding-right: 0
	margin: 0

	h2 
		margin: 0
		color: #fff
		position: absolute
		bottom: 0
		right: 0
		padding-right: 20px
		padding-bottom: 10px

.glasgow-venue
	background-image: url(/assets/img/glasgow.png)
	background-repeat: no-repeat
	background-size: cover
	padding-bottom: 200px
	padding-left: 0
	padding-right: 0
	margin: 0

	h2 
		margin: 0
		color: #fff
		position: absolute
		bottom: 0
		right: 0
		padding-right: 20px
		padding-bottom: 10px

.manchester-venue
	background-image: url(/assets/img/manchester.png)
	background-repeat: no-repeat
	background-size: cover
	padding-bottom: 200px
	padding-left: 0
	padding-right: 0
	margin: 0

	h2 
		margin: 0
		color: #fff
		position: absolute
		bottom: 0
		right: 0
		padding-right: 20px
		padding-bottom: 10px

	.hover-content 
		background: rgba(0,0,0,0.5)
		color: white
		cursor: pointer
		display: table
		height: 150px
		left: 0
		position: absolute
		top: 0
		width: 150px
		opacity: 0

	.hover-content div 
		display: table-cell
		text-align: center
		vertical-align: middle
	&:hover span.text-content
		opacity: 1
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="centers">
    	<div class="row">
    		<div class="col-md-3 no-padding">
    			<div class="birmingham-venue">
    				<h2>Birmingham</h2>
    			</div>
    		</div>
    		<div class="col-md-3 no-padding effect4">
    			<div class="manchester-venue">
    				<h2>Manchester</h2>
					<div class="hover-content">
						<h2>Manchester</h2>
						<p>You gotta roll with it</p>
					</div>
       			</div>
    		</div>
    		<div class="col-md-3 no-padding">
    			<div class="leeds-venue">
    				<h2>Leeds</h2>
    			</div>
    		</div>
			<div class="col-md-3 no-padding">
    			<div class="glasgow-venue">
    				<h2>Glasgow</h2>
    			</div>
    		</div>
    	</div>
    </section>

非常感谢任何帮助

谢谢汤姆

最佳答案

希望对您有所帮助。 https://jsfiddle.net/8Ldwm10p/ 

//css FILE
.box {
  height: 300px;
  width: 300px;
  background: red;
}

.hidden {
  height: 100px;
  width: 100px;
  background: white;
  display:none;
}

.box:hover .hidden {
    display: block;
}

//HTML

<html>


<body>
  <div class="box">
    <div class="hidden">
      Hello there
    </div>
  </div>
</body>
</html>

关于html - CSS3 悬停显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34136664/

25 4 0
文章推荐： python - Django 日期过滤器 : how come the format used is different from the one in datetime library?
文章推荐： linux - 我可以自定义 svnadmin 创建过程吗？
文章推荐： linux - Cron 运行 .sh 文件没有任何结果
文章推荐： jquery - 谷歌翻译填充问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com