0
Я пытаюсь добиться этого, когда DIV элемент завис над пользователем:CSS3 Hover раскрыть Див
Когда я парить над элементом ничего не происходит может кто-то пожалуйста, помогите мне исправить это?
вот моя разметка и SASS:
.birmingham-venue
\t background-image: url(/assets/img/birmingham.png)
\t background-repeat: no-repeat
\t background-size: cover
\t padding-bottom: 200px
\t padding-left: 0
\t padding-right: 0
\t margin: 0
\t h2
\t \t margin: 0
\t \t color: #fff
\t \t position: absolute
\t \t bottom: 0
\t \t right: 0
\t \t padding-right: 20px
\t \t padding-bottom: 10px
.leeds-venue
\t background-image: url(/assets/img/leeds.png)
\t background-repeat: no-repeat
\t background-size: cover
\t padding-bottom: 200px
\t padding-left: 0
\t padding-right: 0
\t margin: 0
\t h2
\t \t margin: 0
\t \t color: #fff
\t \t position: absolute
\t \t bottom: 0
\t \t right: 0
\t \t padding-right: 20px
\t \t padding-bottom: 10px
.glasgow-venue
\t background-image: url(/assets/img/glasgow.png)
\t background-repeat: no-repeat
\t background-size: cover
\t padding-bottom: 200px
\t padding-left: 0
\t padding-right: 0
\t margin: 0
\t h2
\t \t margin: 0
\t \t color: #fff
\t \t position: absolute
\t \t bottom: 0
\t \t right: 0
\t \t padding-right: 20px
\t \t padding-bottom: 10px
.manchester-venue
\t background-image: url(/assets/img/manchester.png)
\t background-repeat: no-repeat
\t background-size: cover
\t padding-bottom: 200px
\t padding-left: 0
\t padding-right: 0
\t margin: 0
\t h2
\t \t margin: 0
\t \t color: #fff
\t \t position: absolute
\t \t bottom: 0
\t \t right: 0
\t \t padding-right: 20px
\t \t padding-bottom: 10px
\t .hover-content
\t \t background: rgba(0,0,0,0.5)
\t \t color: white
\t \t cursor: pointer
\t \t display: table
\t \t height: 150px
\t \t left: 0
\t \t position: absolute
\t \t top: 0
\t \t width: 150px
\t \t opacity: 0
\t .hover-content div
\t \t display: table-cell
\t \t text-align: center
\t \t vertical-align: middle
\t &:hover span.text-content
\t \t 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">
\t <div class="row">
\t \t <div class="col-md-3 no-padding">
\t \t \t <div class="birmingham-venue">
\t \t \t \t <h2>Birmingham</h2>
\t \t \t </div>
\t \t </div>
\t \t <div class="col-md-3 no-padding effect4">
\t \t \t <div class="manchester-venue">
\t \t \t \t <h2>Manchester</h2>
\t \t \t \t \t <div class="hover-content">
\t \t \t \t \t \t <h2>Manchester</h2>
\t \t \t \t \t \t <p>You gotta roll with it</p>
\t \t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="col-md-3 no-padding">
\t \t \t <div class="leeds-venue">
\t \t \t \t <h2>Leeds</h2>
\t \t \t </div>
\t \t </div>
\t \t \t <div class="col-md-3 no-padding">
\t \t \t <div class="glasgow-venue">
\t \t \t \t <h2>Glasgow</h2>
\t \t \t </div>
\t \t </div>
\t </div>
</section>любой помощь очень ценится
Благодаря Тома