0
我有兩個div我的第一個div包含與圖像的鏈接,我的第二個div與position:absolute
我的絕對區域不是可以綁定的,我怎樣才能讓它變得可以綁定?可定位的可點擊區域
我可以點擊空嗎是我的位置:絕對?
你在這裏,這是我的代碼,我使用的引導
.item img{
width:100%;
height:700px !important;
max-width:100%;
display:block;
}
.booking-form {
position: absolute;
z-index: 10;
margin-top: 45px;
right: 0;
left: 0;
}
.tab-system .tab-content{
padding:12px;
background:#FFF;
}
.carousel-control.left, .carousel-control.right {
background-image: none;
-webkit-transition: all ease-in-out 0.6s;
-moz-transition: all ease-in-out 0.6s;
transition: all ease-in-out 0.6s;
}
.carousel-control{
width: auto;
position: absolute;
bottom: auto;
top: 50%;
margin-top: -10px;
display: inline-block;
}
.carousel-control.right {
right: 10%;
}
.carousel-control.left {
left: 10%;
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="booking-form">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="tab-system">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam commodi accusantium, voluptas quisquam obcaecati labore odit tenetur amet ex libero iste quam, nostrum temporibus architecto mollitia ipsum dignissimos non similique.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- this is the booking form-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="#"><img src="https://images.pexels.com/photos/40797/wild-flowers-flowers-plant-macro-40797.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></a>
</div>
<div class="item">
<a href="#"><img src="https://images.pexels.com/photos/3247/nature-forest-industry-rails.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"></a>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
你要像'指針的事件:無;'?在你的'.booking-form'中使用它。爲了讓你的標籤也可以使用'.nav-tabs {pointer-events:visible; }'。 – Huelfe
你想點擊標籤正文並觸發滑塊? – madalinivascu
我的圖像有一個href我想使它可點擊,但在位置區域我的圖像是不可點擊的我也想點擊位置區域 –