Question

我尝试在用户悬停div元素时实现此目的：

当我将鼠标悬停在元素上时，没有任何事情可以帮助我解决这个问题？

这是我的标记和SASS：

＆＃13;

.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

＆＃13;

<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>

＆＃13;

非常感谢任何帮助

由于汤姆

Answer 1

希望这会对你有所帮助。 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>

Answer 2

班级manchester-venue on hover写css manchester-venue：hover {}在其中，类似于其他课程

CSS3 Hover显示div

2 个答案: